mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-18 11:18:14 +08:00
Merge pull request #32472 from ant-design/master
chore: sync master into feature
This commit is contained in:
afc163
GitHub
commit
be064df13b
@ -15,6 +15,18 @@ timeline: true
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 4.17.0-alpha.6
|
||||||
|
|
||||||
|
`2021-10-11`
|
||||||
|
|
||||||
|
- 🐞 Fix InputNumber handler arrow not align center. [#32409](https://github.com/ant-design/ant-design/pull/32409)
|
||||||
|
- 🐞 Fix `closeIcon` overwriting bug when Notification is called multiple times. [#32359](https://github.com/ant-design/ant-design/pull/32359) [@KAROTT7](https://github.com/KAROTT7)
|
||||||
|
- 🐞 Fix Button align issue with `icon` and `href`. [#32373](https://github.com/ant-design/ant-design/pull/32373)
|
||||||
|
- 💄 Optimize Drawer open animation. [#32342](https://github.com/ant-design/ant-design/pull/32342)
|
||||||
|
- 💄 Fix Mentions error style in Form. [#32385](https://github.com/ant-design/ant-design/pull/32385)
|
||||||
|
- TypeScript
|
||||||
|
- 🤖 Fix args type for `getPopupContainer` in ConfigProvider. [#32406](https://github.com/ant-design/ant-design/pull/32406) [@mtadams007](https://github.com/mtadams007)
|
||||||
|
|
||||||
## 4.17.0-alpha.5
|
## 4.17.0-alpha.5
|
||||||
|
|
||||||
`2021-09-30`
|
`2021-09-30`
|
||||||
|
|||||||
@ -15,6 +15,18 @@ timeline: true
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 4.17.0-alpha.6
|
||||||
|
|
||||||
|
`2021-10-11`
|
||||||
|
|
||||||
|
- 🐞 修复 InputNumber 操作杆箭头未居中对齐的问题。[#32409](https://github.com/ant-design/ant-design/pull/32409)
|
||||||
|
- 🐞 修复多次调用 Notification 时 `closeIcon` 配置会被覆盖的问题。[#32359](https://github.com/ant-design/ant-design/pull/32359) [@KAROTT7](https://github.com/KAROTT7)
|
||||||
|
- 🐞 修复 Button 有 `icon` 和 `href` 时的对齐问题。[#32373](https://github.com/ant-design/ant-design/pull/32373)
|
||||||
|
- 💄 优化 Drawer 弹出动画。[#32342](https://github.com/ant-design/ant-design/pull/32342)
|
||||||
|
- 💄 修复 Mentions 在 Form 下错误样式丢失的问题。[#32385](https://github.com/ant-design/ant-design/pull/32385)
|
||||||
|
- TypeScript
|
||||||
|
- 🤖 修复 ConfigProvider 中 `getPopupContainer` 的参数类型。[#32406](https://github.com/ant-design/ant-design/pull/32406) [@mtadams007](https://github.com/mtadams007)
|
||||||
|
|
||||||
## 4.17.0-alpha.5
|
## 4.17.0-alpha.5
|
||||||
|
|
||||||
`2021-09-30`
|
`2021-09-30`
|
||||||
|
|||||||
@ -89,6 +89,7 @@ describe('Alert', () => {
|
|||||||
|
|
||||||
it('ErrorBoundary', () => {
|
it('ErrorBoundary', () => {
|
||||||
jest.spyOn(console, 'error').mockImplementation(() => undefined);
|
jest.spyOn(console, 'error').mockImplementation(() => undefined);
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
expect(console.error).toBeCalledTimes(0);
|
expect(console.error).toBeCalledTimes(0);
|
||||||
// @ts-expect-error
|
// @ts-expect-error
|
||||||
// eslint-disable-next-line react/jsx-no-undef
|
// eslint-disable-next-line react/jsx-no-undef
|
||||||
|
|||||||
@ -84,6 +84,7 @@
|
|||||||
.@{iconfont-css-prefix}-close {
|
.@{iconfont-css-prefix}-close {
|
||||||
color: @alert-close-color;
|
color: @alert-close-color;
|
||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @alert-close-hover-color;
|
color: @alert-close-hover-color;
|
||||||
}
|
}
|
||||||
@ -93,6 +94,7 @@
|
|||||||
&-close-text {
|
&-close-text {
|
||||||
color: @alert-close-color;
|
color: @alert-close-color;
|
||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @alert-close-hover-color;
|
color: @alert-close-hover-color;
|
||||||
}
|
}
|
||||||
@ -111,6 +113,7 @@
|
|||||||
margin-right: @alert-with-description-padding-vertical;
|
margin-right: @alert-with-description-padding-vertical;
|
||||||
font-size: @alert-with-description-icon-size;
|
font-size: @alert-with-description-icon-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-with-description &-message {
|
&-with-description &-message {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
|||||||
@ -21,6 +21,7 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
@ -30,6 +31,7 @@
|
|||||||
background-color: @anchor-border-color;
|
background-color: @anchor-border-color;
|
||||||
content: ' ';
|
content: ' ';
|
||||||
}
|
}
|
||||||
|
|
||||||
&-ball {
|
&-ball {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
@ -41,6 +43,7 @@
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
transition: top 0.3s ease-in-out;
|
transition: top 0.3s ease-in-out;
|
||||||
|
|
||||||
&.visible {
|
&.visible {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -25,6 +25,7 @@
|
|||||||
background: @badge-color;
|
background: @badge-color;
|
||||||
border-radius: (@badge-height / 2);
|
border-radius: (@badge-height / 2);
|
||||||
box-shadow: 0 0 0 1px @shadow-color-inverse;
|
box-shadow: 0 0 0 1px @shadow-color-inverse;
|
||||||
|
|
||||||
a,
|
a,
|
||||||
a:hover {
|
a:hover {
|
||||||
color: @badge-text-color;
|
color: @badge-text-color;
|
||||||
@ -86,12 +87,15 @@
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-success {
|
&-success {
|
||||||
background-color: @success-color;
|
background-color: @success-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-processing {
|
&-processing {
|
||||||
position: relative;
|
position: relative;
|
||||||
background-color: @processing-color;
|
background-color: @processing-color;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -104,12 +108,15 @@
|
|||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-default {
|
&-default {
|
||||||
background-color: @normal-color;
|
background-color: @normal-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-error {
|
&-error {
|
||||||
background-color: @error-color;
|
background-color: @error-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-warning {
|
&-warning {
|
||||||
background-color: @warning-color;
|
background-color: @warning-color;
|
||||||
}
|
}
|
||||||
@ -177,6 +184,7 @@
|
|||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(2.4);
|
transform: scale(2.4);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -192,6 +200,7 @@
|
|||||||
.@{number-prefix-cls} {
|
.@{number-prefix-cls} {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
direction: ltr;
|
direction: ltr;
|
||||||
|
|
||||||
&-only {
|
&-only {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -216,6 +225,7 @@
|
|||||||
transform: scale(0) translate(50%, -50%);
|
transform: scale(0) translate(50%, -50%);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1) translate(50%, -50%);
|
transform: scale(1) translate(50%, -50%);
|
||||||
}
|
}
|
||||||
@ -225,6 +235,7 @@
|
|||||||
0% {
|
0% {
|
||||||
transform: scale(1) translate(50%, -50%);
|
transform: scale(1) translate(50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(0) translate(50%, -50%);
|
transform: scale(0) translate(50%, -50%);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -236,6 +247,7 @@
|
|||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
@ -245,6 +257,7 @@
|
|||||||
0% {
|
0% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|||||||
@ -43,6 +43,7 @@
|
|||||||
right: unset;
|
right: unset;
|
||||||
left: 0;
|
left: 0;
|
||||||
border-color: currentColor currentColor transparent transparent;
|
border-color: currentColor currentColor transparent transparent;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-color: currentColor currentColor transparent transparent;
|
border-color: currentColor currentColor transparent transparent;
|
||||||
}
|
}
|
||||||
@ -57,6 +58,7 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
left: unset;
|
left: unset;
|
||||||
border-color: currentColor transparent transparent currentColor;
|
border-color: currentColor transparent transparent currentColor;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-color: currentColor transparent transparent currentColor;
|
border-color: currentColor transparent transparent currentColor;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,6 +16,7 @@
|
|||||||
a {
|
a {
|
||||||
color: @breadcrumb-link-color;
|
color: @breadcrumb-link-color;
|
||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @breadcrumb-link-color-hover;
|
color: @breadcrumb-link-color-hover;
|
||||||
}
|
}
|
||||||
@ -23,6 +24,7 @@
|
|||||||
|
|
||||||
& > span:last-child {
|
& > span:last-child {
|
||||||
color: @breadcrumb-last-item-color;
|
color: @breadcrumb-last-item-color;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: @breadcrumb-last-item-color;
|
color: @breadcrumb-last-item-color;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -281,6 +281,7 @@ a.@{btn-prefix-cls} {
|
|||||||
&-lg {
|
&-lg {
|
||||||
line-height: @btn-height-lg - 2px;
|
line-height: @btn-height-lg - 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-sm {
|
&-sm {
|
||||||
line-height: @btn-height-sm - 2px;
|
line-height: @btn-height-sm - 2px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,6 +20,7 @@
|
|||||||
// http://stackoverflow.com/a/17253457
|
// http://stackoverflow.com/a/17253457
|
||||||
> a:only-child {
|
> a:only-child {
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -106,6 +107,7 @@
|
|||||||
.button-color(@primary-color-hover; @background; @primary-color-hover);
|
.button-color(@primary-color-hover; @background; @primary-color-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
& when (@theme = dark) {
|
& when (@theme = dark) {
|
||||||
.button-color(@primary-7; @background; @primary-7);
|
.button-color(@primary-7; @background; @primary-7);
|
||||||
@ -126,6 +128,7 @@
|
|||||||
.button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) {
|
.button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) {
|
||||||
.button-color(@color; null; @border);
|
.button-color(@color; null; @border);
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
& when (@border = transparent) {
|
& when (@border = transparent) {
|
||||||
@ -155,6 +158,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
& when (@border = transparent) {
|
& when (@border = transparent) {
|
||||||
& when (@theme = dark) {
|
& when (@theme = dark) {
|
||||||
@ -192,11 +196,13 @@
|
|||||||
> .@{btnClassName},
|
> .@{btnClassName},
|
||||||
> span > .@{btnClassName} {
|
> span > .@{btnClassName} {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
@ -248,29 +254,36 @@
|
|||||||
> .@{iconfont-css-prefix} {
|
> .@{iconfont-css-prefix} {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&,
|
&,
|
||||||
&:active,
|
&:active,
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not([disabled]):hover {
|
&:not([disabled]):hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not([disabled]):active {
|
&:not([disabled]):active {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-lg {
|
&-lg {
|
||||||
.button-size(
|
.button-size(
|
||||||
@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
|
@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-sm {
|
&-sm {
|
||||||
.button-size(
|
.button-size(
|
||||||
@btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
|
@btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
|
||||||
@ -284,6 +297,7 @@
|
|||||||
// default button style
|
// default button style
|
||||||
.btn-default() {
|
.btn-default() {
|
||||||
.button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border; );
|
.button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border; );
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
@ -307,6 +321,7 @@
|
|||||||
// danger default button style
|
// danger default button style
|
||||||
.btn-danger-default() {
|
.btn-danger-default() {
|
||||||
.button-color(@error-color, @btn-default-bg, @error-color);
|
.button-color(@error-color, @btn-default-bg, @error-color);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
& when (@theme = dark) {
|
& when (@theme = dark) {
|
||||||
@ -325,6 +340,7 @@
|
|||||||
.button-color(@error-color-hover, @btn-default-bg, @error-color-hover);
|
.button-color(@error-color-hover, @btn-default-bg, @error-color-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
& when (@theme = dark) {
|
& when (@theme = dark) {
|
||||||
.button-color(
|
.button-color(
|
||||||
@ -348,6 +364,7 @@
|
|||||||
.btn-danger-link() {
|
.btn-danger-link() {
|
||||||
.button-variant-other(@error-color, transparent, transparent);
|
.button-variant-other(@error-color, transparent, transparent);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
& when (@theme = dark) {
|
& when (@theme = dark) {
|
||||||
@ -360,6 +377,7 @@
|
|||||||
.button-color(@error-color-hover; transparent; transparent);
|
.button-color(@error-color-hover; transparent; transparent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
& when (@theme = dark) {
|
& when (@theme = dark) {
|
||||||
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
|
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
|
||||||
@ -377,9 +395,11 @@
|
|||||||
.btn-link() {
|
.btn-link() {
|
||||||
.button-variant-other(@link-color, transparent, transparent);
|
.button-variant-other(@link-color, transparent, transparent);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: @btn-link-hover-bg;
|
background: @btn-link-hover-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
&:active {
|
&:active {
|
||||||
@ -391,6 +411,7 @@
|
|||||||
.btn-text() {
|
.btn-text() {
|
||||||
.button-variant-other(@text-color, transparent, transparent);
|
.button-variant-other(@text-color, transparent, transparent);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
@ -409,6 +430,7 @@
|
|||||||
.btn-danger-text() {
|
.btn-danger-text() {
|
||||||
.button-variant-other(@error-color, transparent, transparent);
|
.button-variant-other(@error-color, transparent, transparent);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
& when (@theme = dark) {
|
& when (@theme = dark) {
|
||||||
@ -453,12 +475,14 @@
|
|||||||
.btn-square(@btnClassName: btn) {
|
.btn-square(@btnClassName: btn) {
|
||||||
.square(@btn-square-size);
|
.square(@btn-square-size);
|
||||||
.button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
|
.button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
font-size: @btn-square-only-icon-size;
|
font-size: @btn-square-only-icon-size;
|
||||||
}
|
}
|
||||||
&.@{btnClassName}-lg {
|
&.@{btnClassName}-lg {
|
||||||
.square(@btn-square-size-lg);
|
.square(@btn-square-size-lg);
|
||||||
.button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
|
.button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
font-size: @btn-square-only-icon-size-lg;
|
font-size: @btn-square-only-icon-size-lg;
|
||||||
}
|
}
|
||||||
@ -466,6 +490,7 @@
|
|||||||
&.@{btnClassName}-sm {
|
&.@{btnClassName}-sm {
|
||||||
.square(@btn-square-size-sm);
|
.square(@btn-square-size-sm);
|
||||||
.button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
|
.button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
font-size: @btn-square-only-icon-size-sm;
|
font-size: @btn-square-only-icon-size-sm;
|
||||||
}
|
}
|
||||||
@ -526,6 +551,7 @@
|
|||||||
border-top-right-radius: @btn-border-radius-base;
|
border-top-right-radius: @btn-border-radius-base;
|
||||||
border-bottom-right-radius: @btn-border-radius-base;
|
border-bottom-right-radius: @btn-border-radius-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-sm {
|
&-sm {
|
||||||
> .@{btnClassName}:only-child {
|
> .@{btnClassName}:only-child {
|
||||||
border-radius: @btn-border-radius-sm;
|
border-radius: @btn-border-radius-sm;
|
||||||
@ -544,12 +570,14 @@
|
|||||||
border-bottom-right-radius: @btn-border-radius-sm;
|
border-bottom-right-radius: @btn-border-radius-sm;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > & {
|
& > & {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
& > &:not(:first-child):not(:last-child) > .@{btnClassName} {
|
& > &:not(:first-child):not(:last-child) > .@{btnClassName} {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
& > &:first-child:not(:last-child) {
|
& > &:first-child:not(:last-child) {
|
||||||
> .@{btnClassName}:last-child {
|
> .@{btnClassName}:last-child {
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
|
|||||||
@ -10,6 +10,7 @@
|
|||||||
border-right-color: @btn-group-border;
|
border-right-color: @btn-group-border;
|
||||||
border-left-color: @btn-default-border;
|
border-left-color: @btn-default-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
.@{btn-prefix-cls}-group-rtl& {
|
.@{btn-prefix-cls}-group-rtl& {
|
||||||
border-right-color: @btn-default-border;
|
border-right-color: @btn-default-border;
|
||||||
|
|||||||
@ -250,6 +250,7 @@
|
|||||||
|
|
||||||
&-detail {
|
&-detail {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
> div:not(:last-child) {
|
> div:not(:last-child) {
|
||||||
margin-bottom: @margin-xs;
|
margin-bottom: @margin-xs;
|
||||||
}
|
}
|
||||||
@ -298,6 +299,7 @@
|
|||||||
100% {
|
100% {
|
||||||
background-position: 0 50%;
|
background-position: 0 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
50% {
|
||||||
background-position: 100% 50%;
|
background-position: 100% 50%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -116,6 +116,7 @@
|
|||||||
display: block;
|
display: block;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slick-arrow.slick-hidden {
|
.slick-arrow.slick-hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -137,15 +138,18 @@
|
|||||||
border: 0;
|
border: 0;
|
||||||
outline: none;
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: transparent;
|
color: transparent;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.slick-disabled::before {
|
&.slick-disabled::before {
|
||||||
opacity: 0.25;
|
opacity: 0.25;
|
||||||
}
|
}
|
||||||
@ -161,6 +165,7 @@
|
|||||||
|
|
||||||
.slick-next {
|
.slick-next {
|
||||||
right: -25px;
|
right: -25px;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '→';
|
content: '→';
|
||||||
}
|
}
|
||||||
@ -183,10 +188,12 @@
|
|||||||
&-bottom {
|
&-bottom {
|
||||||
bottom: 12px;
|
bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-top {
|
&-top {
|
||||||
top: 12px;
|
top: 12px;
|
||||||
bottom: auto;
|
bottom: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -202,6 +209,7 @@
|
|||||||
text-indent: -999px;
|
text-indent: -999px;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -216,17 +224,21 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.slick-active {
|
&.slick-active {
|
||||||
width: @carousel-dot-active-width;
|
width: @carousel-dot-active-width;
|
||||||
|
|
||||||
& button {
|
& button {
|
||||||
background: @component-background;
|
background: @component-background;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -250,19 +262,23 @@
|
|||||||
right: auto;
|
right: auto;
|
||||||
left: 12px;
|
left: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-right {
|
&-right {
|
||||||
right: 12px;
|
right: 12px;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: @carousel-dot-height;
|
width: @carousel-dot-height;
|
||||||
height: @carousel-dot-width;
|
height: @carousel-dot-width;
|
||||||
margin: 4px 2px;
|
margin: 4px 2px;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
width: @carousel-dot-height;
|
width: @carousel-dot-height;
|
||||||
height: @carousel-dot-width;
|
height: @carousel-dot-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.slick-active {
|
&.slick-active {
|
||||||
width: @carousel-dot-height;
|
width: @carousel-dot-height;
|
||||||
height: @carousel-dot-active-width;
|
height: @carousel-dot-active-width;
|
||||||
|
|||||||
@ -19,6 +19,7 @@
|
|||||||
.@{carousel-prefix-cls}-rtl & {
|
.@{carousel-prefix-cls}-rtl & {
|
||||||
right: -25px;
|
right: -25px;
|
||||||
left: auto;
|
left: auto;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '→';
|
content: '→';
|
||||||
}
|
}
|
||||||
@ -29,6 +30,7 @@
|
|||||||
.@{carousel-prefix-cls}-rtl & {
|
.@{carousel-prefix-cls}-rtl & {
|
||||||
right: auto;
|
right: auto;
|
||||||
left: -25px;
|
left: -25px;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '←';
|
content: '←';
|
||||||
}
|
}
|
||||||
|
|||||||
@ -327,14 +327,15 @@ describe('Cascader', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// FIXME: Move to `rc-tree-select` instead
|
// FIXME: Move to `rc-tree-select` instead
|
||||||
// it('should warning if not find `value` in `options`', () => {
|
// eslint-disable-next-line jest/no-disabled-tests
|
||||||
// const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
it.skip('should warning if not find `value` in `options`', () => {
|
||||||
// mount(<Cascader options={[{ label: 'a', value: 'a', children: [{ label: 'b' }] }]} />);
|
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||||
// expect(errorSpy).toHaveBeenCalledWith(
|
mount(<Cascader options={[{ label: 'a', value: 'a', children: [{ label: 'b' }] }]} />);
|
||||||
// 'Warning: [antd: Cascader] Not found `value` in `options`.',
|
expect(errorSpy).toHaveBeenCalledWith(
|
||||||
// );
|
'Warning: [antd: Cascader] Not found `value` in `options`.',
|
||||||
// errorSpy.mockRestore();
|
);
|
||||||
// });
|
errorSpy.mockRestore();
|
||||||
|
});
|
||||||
|
|
||||||
// https://github.com/ant-design/ant-design/issues/17690
|
// https://github.com/ant-design/ant-design/issues/17690
|
||||||
it('should not breaks when children is null', () => {
|
it('should not breaks when children is null', () => {
|
||||||
|
|||||||
@ -59,6 +59,7 @@
|
|||||||
&-disabled {
|
&-disabled {
|
||||||
color: @disabled-color;
|
color: @disabled-color;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,4 +2,5 @@
|
|||||||
@import './mixin';
|
@import './mixin';
|
||||||
|
|
||||||
.antCheckboxFn();
|
.antCheckboxFn();
|
||||||
|
|
||||||
@import './rtl';
|
@import './rtl';
|
||||||
|
|||||||
@ -127,6 +127,7 @@
|
|||||||
.@{checkbox-inner-prefix-cls} {
|
.@{checkbox-inner-prefix-cls} {
|
||||||
background-color: @input-disabled-bg;
|
background-color: @input-disabled-bg;
|
||||||
border-color: @border-color-base !important;
|
border-color: @border-color-base !important;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-color: @input-disabled-bg;
|
border-color: @input-disabled-bg;
|
||||||
border-collapse: separate;
|
border-collapse: separate;
|
||||||
@ -180,10 +181,12 @@
|
|||||||
|
|
||||||
&-item {
|
&-item {
|
||||||
margin-right: @checkbox-group-item-margin-right;
|
margin-right: @checkbox-group-item-margin-right;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-item + &-item {
|
&-item + &-item {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -222,6 +225,7 @@
|
|||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1.6);
|
transform: scale(1.6);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|||||||
@ -11,12 +11,14 @@
|
|||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: @checkbox-group-item-margin-right;
|
margin-left: @checkbox-group-item-margin-right;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
.@{checkbox-prefix-cls}-group-rtl & {
|
.@{checkbox-prefix-cls}-group-rtl & {
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-item + &-item {
|
&-item + &-item {
|
||||||
.@{checkbox-prefix-cls}-group-rtl & {
|
.@{checkbox-prefix-cls}-group-rtl & {
|
||||||
margin-left: @checkbox-group-item-margin-right;
|
margin-left: @checkbox-group-item-margin-right;
|
||||||
|
|||||||
@ -38,6 +38,7 @@
|
|||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
margin-bottom: @margin-xss;
|
margin-bottom: @margin-xss;
|
||||||
font-size: @comment-font-size-base;
|
font-size: @comment-font-size-base;
|
||||||
|
|
||||||
& > a,
|
& > a,
|
||||||
& > span {
|
& > span {
|
||||||
padding-right: @padding-xs;
|
padding-right: @padding-xs;
|
||||||
@ -49,8 +50,10 @@
|
|||||||
color: @comment-author-name-color;
|
color: @comment-author-name-color;
|
||||||
font-size: @comment-font-size-base;
|
font-size: @comment-font-size-base;
|
||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
color: @comment-author-name-color;
|
color: @comment-author-name-color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @comment-author-name-color;
|
color: @comment-author-name-color;
|
||||||
}
|
}
|
||||||
@ -78,6 +81,7 @@
|
|||||||
> li {
|
> li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
color: @comment-action-color;
|
color: @comment-action-color;
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
color: @comment-action-color;
|
color: @comment-action-color;
|
||||||
|
|||||||
@ -31,6 +31,7 @@
|
|||||||
.@{comment-prefix-cls}-rtl & {
|
.@{comment-prefix-cls}-rtl & {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> li {
|
> li {
|
||||||
> span {
|
> span {
|
||||||
.@{comment-prefix-cls}-rtl & {
|
.@{comment-prefix-cls}-rtl & {
|
||||||
|
|||||||
@ -60,7 +60,6 @@ jest.mock('rc-util/lib/Portal');
|
|||||||
describe('ConfigProvider', () => {
|
describe('ConfigProvider', () => {
|
||||||
describe('components', () => {
|
describe('components', () => {
|
||||||
function testPair(name, renderComponent) {
|
function testPair(name, renderComponent) {
|
||||||
// eslint-disable-next-line jest/valid-describe
|
|
||||||
describe(`${name}`, () => {
|
describe(`${name}`, () => {
|
||||||
// normal
|
// normal
|
||||||
it('normal', () => {
|
it('normal', () => {
|
||||||
|
|||||||
@ -280,6 +280,7 @@
|
|||||||
&-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
|
&-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
|
||||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
// range end border-radius
|
// range end border-radius
|
||||||
&-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
|
&-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
|
||||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||||
@ -298,12 +299,14 @@
|
|||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{picker-prefix-cls}-date-panel
|
.@{picker-prefix-cls}-date-panel
|
||||||
&-in-view&-in-range&-range-hover-start
|
&-in-view&-in-range&-range-hover-start
|
||||||
.@{cellClassName}::after {
|
.@{cellClassName}::after {
|
||||||
right: -5px - @border-width-base;
|
right: -5px - @border-width-base;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
|
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
|
||||||
right: 0;
|
right: 0;
|
||||||
left: -5px - @border-width-base;
|
left: -5px - @border-width-base;
|
||||||
@ -313,6 +316,7 @@
|
|||||||
&-range-hover&-range-start::after {
|
&-range-hover&-range-start::after {
|
||||||
right: 50%;
|
right: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-range-hover&-range-end::after {
|
&-range-hover&-range-end::after {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -31,6 +31,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
@ -42,6 +43,7 @@
|
|||||||
> td {
|
> td {
|
||||||
padding-bottom: @descriptions-item-padding-bottom;
|
padding-bottom: @descriptions-item-padding-bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
@ -126,6 +128,7 @@
|
|||||||
&-bordered {
|
&-bordered {
|
||||||
.@{descriptions-prefix-cls}-view {
|
.@{descriptions-prefix-cls}-view {
|
||||||
border: 1px solid @border-color-split;
|
border: 1px solid @border-color-split;
|
||||||
|
|
||||||
> table {
|
> table {
|
||||||
table-layout: auto;
|
table-layout: auto;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
@ -144,6 +147,7 @@
|
|||||||
|
|
||||||
.@{descriptions-prefix-cls}-item-label {
|
.@{descriptions-prefix-cls}-item-label {
|
||||||
background-color: @descriptions-bg;
|
background-color: @descriptions-bg;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -151,6 +155,7 @@
|
|||||||
|
|
||||||
.@{descriptions-prefix-cls}-row {
|
.@{descriptions-prefix-cls}-row {
|
||||||
border-bottom: 1px solid @border-color-split;
|
border-bottom: 1px solid @border-color-split;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -57,6 +57,7 @@
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
width: @divider-orientation-margin;
|
width: @divider-orientation-margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 100% - @divider-orientation-margin;
|
width: 100% - @divider-orientation-margin;
|
||||||
@ -68,6 +69,7 @@
|
|||||||
top: 50%;
|
top: 50%;
|
||||||
width: 100% - @divider-orientation-margin;
|
width: 100% - @divider-orientation-margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: @divider-orientation-margin;
|
width: @divider-orientation-margin;
|
||||||
@ -88,6 +90,7 @@
|
|||||||
|
|
||||||
&-horizontal&-with-text&-dashed {
|
&-horizontal&-with-text&-dashed {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
|
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
border-style: dashed none none;
|
border-style: dashed none none;
|
||||||
|
|||||||
@ -14,6 +14,7 @@
|
|||||||
width: 100% - @divider-orientation-margin;
|
width: 100% - @divider-orientation-margin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
.@{divider-prefix-cls}-rtl& {
|
.@{divider-prefix-cls}-rtl& {
|
||||||
width: @divider-orientation-margin;
|
width: @divider-orientation-margin;
|
||||||
@ -27,6 +28,7 @@
|
|||||||
width: @divider-orientation-margin;
|
width: @divider-orientation-margin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
.@{divider-prefix-cls}-rtl& {
|
.@{divider-prefix-cls}-rtl& {
|
||||||
width: 100% - @divider-orientation-margin;
|
width: 100% - @divider-orientation-margin;
|
||||||
|
|||||||
@ -112,6 +112,7 @@
|
|||||||
.@{drawer-prefix-cls}-content-wrapper {
|
.@{drawer-prefix-cls}-content-wrapper {
|
||||||
box-shadow: @shadow-1-up;
|
box-shadow: @shadow-1-up;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.no-mask {
|
&.no-mask {
|
||||||
bottom: 1px;
|
bottom: 1px;
|
||||||
transform: translateY(1px);
|
transform: translateY(1px);
|
||||||
@ -245,6 +246,7 @@
|
|||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -86,13 +86,16 @@
|
|||||||
border-left-color: transparent;
|
border-left-color: transparent;
|
||||||
box-shadow: 3px 3px 7px fade(@black, 7%);
|
box-shadow: 3px 3px 7px fade(@black, 7%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-placement-topCenter > &-arrow {
|
&-placement-topCenter > &-arrow {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%) rotate(45deg);
|
transform: translateX(-50%) rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-placement-topLeft > &-arrow {
|
&-placement-topLeft > &-arrow {
|
||||||
left: 16px;
|
left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-placement-topRight > &-arrow {
|
&-placement-topRight > &-arrow {
|
||||||
right: 16px;
|
right: 16px;
|
||||||
}
|
}
|
||||||
@ -107,13 +110,16 @@
|
|||||||
border-left-color: @popover-bg;
|
border-left-color: @popover-bg;
|
||||||
box-shadow: -2px -2px 5px fade(@black, 6%);
|
box-shadow: -2px -2px 5px fade(@black, 6%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-placement-bottomCenter > &-arrow {
|
&-placement-bottomCenter > &-arrow {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%) rotate(45deg);
|
transform: translateX(-50%) rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-placement-bottomLeft > &-arrow {
|
&-placement-bottomLeft > &-arrow {
|
||||||
left: 16px;
|
left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-placement-bottomRight > &-arrow {
|
&-placement-bottomRight > &-arrow {
|
||||||
right: 16px;
|
right: 16px;
|
||||||
}
|
}
|
||||||
@ -362,6 +368,7 @@
|
|||||||
.@{dropdown-prefix-cls}-menu-submenu-arrow::after {
|
.@{dropdown-prefix-cls}-menu-submenu-arrow::after {
|
||||||
color: @text-color-secondary-dark;
|
color: @text-color-secondary-dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @text-color-inverse;
|
color: @text-color-inverse;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|||||||
@ -55,23 +55,29 @@
|
|||||||
fill: @white;
|
fill: @white;
|
||||||
fill-opacity: 0.08;
|
fill-opacity: 0.08;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-path {
|
&-path {
|
||||||
&-1 {
|
&-1 {
|
||||||
fill: #262626;
|
fill: #262626;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-2 {
|
&-2 {
|
||||||
fill: url(#linearGradient-1);
|
fill: url(#linearGradient-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-3 {
|
&-3 {
|
||||||
fill: #595959;
|
fill: #595959;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-4 {
|
&-4 {
|
||||||
fill: #434343;
|
fill: #434343;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-5 {
|
&-5 {
|
||||||
fill: #595959;
|
fill: #595959;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-g {
|
&-g {
|
||||||
fill: #434343;
|
fill: #434343;
|
||||||
}
|
}
|
||||||
@ -81,23 +87,29 @@
|
|||||||
fill: #f5f5f5;
|
fill: #f5f5f5;
|
||||||
fill-opacity: 0.8;
|
fill-opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-path {
|
&-path {
|
||||||
&-1 {
|
&-1 {
|
||||||
fill: #aeb8c2;
|
fill: #aeb8c2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-2 {
|
&-2 {
|
||||||
fill: url(#linearGradient-1);
|
fill: url(#linearGradient-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-3 {
|
&-3 {
|
||||||
fill: #f5f5f7;
|
fill: #f5f5f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-4 {
|
&-4 {
|
||||||
fill: #dce0e6;
|
fill: #dce0e6;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-5 {
|
&-5 {
|
||||||
fill: #dce0e6;
|
fill: #dce0e6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-g {
|
&-g {
|
||||||
fill: @white;
|
fill: @white;
|
||||||
}
|
}
|
||||||
@ -111,9 +123,11 @@
|
|||||||
fill: @white;
|
fill: @white;
|
||||||
fill-opacity: 0.08;
|
fill-opacity: 0.08;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-g {
|
&-g {
|
||||||
stroke: #434343;
|
stroke: #434343;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-path {
|
&-path {
|
||||||
fill: #262626;
|
fill: #262626;
|
||||||
stroke: #434343;
|
stroke: #434343;
|
||||||
@ -123,9 +137,11 @@
|
|||||||
&-ellipse {
|
&-ellipse {
|
||||||
fill: #f5f5f5;
|
fill: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-g {
|
&-g {
|
||||||
stroke: #d9d9d9;
|
stroke: #d9d9d9;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-path {
|
&-path {
|
||||||
fill: #fafafa;
|
fill: #fafafa;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -54,6 +54,7 @@
|
|||||||
+ .@{form-prefix-cls}-text {
|
+ .@{form-prefix-cls}-text {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-handler-wrap {
|
&-handler-wrap {
|
||||||
z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
|
z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
|
||||||
}
|
}
|
||||||
|
|||||||
@ -39,6 +39,7 @@
|
|||||||
&-small {
|
&-small {
|
||||||
.formSize(@input-height-sm);
|
.formSize(@input-height-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-large {
|
&-large {
|
||||||
.formSize(@input-height-lg);
|
.formSize(@input-height-lg);
|
||||||
}
|
}
|
||||||
@ -263,6 +264,7 @@
|
|||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -274,6 +276,7 @@
|
|||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -285,6 +288,7 @@
|
|||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|||||||
@ -32,6 +32,7 @@
|
|||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
.@{form-prefix-cls}-rtl & {
|
.@{form-prefix-cls}-rtl & {
|
||||||
margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right;
|
margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right;
|
||||||
@ -130,6 +131,7 @@
|
|||||||
margin-left: 19px;
|
margin-left: 19px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-clear {
|
&-clear {
|
||||||
.@{form-prefix-cls}-rtl & {
|
.@{form-prefix-cls}-rtl & {
|
||||||
right: auto;
|
right: auto;
|
||||||
|
|||||||
@ -75,6 +75,7 @@
|
|||||||
&-arrow {
|
&-arrow {
|
||||||
margin-right: 19px;
|
margin-right: 19px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-clear {
|
&-clear {
|
||||||
right: 32px;
|
right: 32px;
|
||||||
}
|
}
|
||||||
@ -154,10 +155,12 @@
|
|||||||
.@{ant-prefix}-picker {
|
.@{ant-prefix}-picker {
|
||||||
background-color: @form-warning-input-bg;
|
background-color: @form-warning-input-bg;
|
||||||
border-color: @warning-color;
|
border-color: @warning-color;
|
||||||
|
|
||||||
&-focused,
|
&-focused,
|
||||||
&:focus {
|
&:focus {
|
||||||
.active(@warning-color, @warning-color-hover, @warning-color-outline);
|
.active(@warning-color, @warning-color-hover, @warning-color-outline);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not([disabled]):hover {
|
&:not([disabled]):hover {
|
||||||
background-color: @form-warning-input-bg;
|
background-color: @form-warning-input-bg;
|
||||||
border-color: @warning-color;
|
border-color: @warning-color;
|
||||||
@ -214,10 +217,12 @@
|
|||||||
.@{ant-prefix}-picker {
|
.@{ant-prefix}-picker {
|
||||||
background-color: @form-error-input-bg;
|
background-color: @form-error-input-bg;
|
||||||
border-color: @error-color;
|
border-color: @error-color;
|
||||||
|
|
||||||
&-focused,
|
&-focused,
|
||||||
&:focus {
|
&:focus {
|
||||||
.active(@error-color, @error-color-hover, @error-color-outline);
|
.active(@error-color, @error-color-hover, @error-color-outline);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not([disabled]):hover {
|
&:not([disabled]):hover {
|
||||||
background-color: @form-error-input-bg;
|
background-color: @form-error-input-bg;
|
||||||
border-color: @error-color;
|
border-color: @error-color;
|
||||||
@ -285,6 +290,7 @@
|
|||||||
// Mentions
|
// Mentions
|
||||||
.@{ant-prefix}-mentions {
|
.@{ant-prefix}-mentions {
|
||||||
border-color: @error-color !important;
|
border-color: @error-color !important;
|
||||||
|
|
||||||
&-focused,
|
&-focused,
|
||||||
&:focus {
|
&:focus {
|
||||||
.active(@error-color, @error-color-hover, @error-color-outline);
|
.active(@error-color, @error-color-hover, @error-color-outline);
|
||||||
|
|||||||
@ -7,10 +7,12 @@
|
|||||||
.@{image-prefix-cls} {
|
.@{image-prefix-cls} {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
&-img {
|
&-img {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
&-placeholder {
|
&-placeholder {
|
||||||
background-color: @image-bg;
|
background-color: @image-bg;
|
||||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
|
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
|
||||||
@ -74,9 +76,11 @@
|
|||||||
transition: transform 0.3s @ease-out 0s;
|
transition: transform 0.3s @ease-out 0s;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
.box();
|
.box();
|
||||||
transition: transform 0.3s @ease-out 0s;
|
transition: transform 0.3s @ease-out 0s;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
@ -90,6 +94,7 @@
|
|||||||
&-moving {
|
&-moving {
|
||||||
.@{image-prefix-cls}-preview-img {
|
.@{image-prefix-cls}-preview-img {
|
||||||
cursor: grabbing;
|
cursor: grabbing;
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
transition-duration: 0s;
|
transition-duration: 0s;
|
||||||
}
|
}
|
||||||
@ -119,14 +124,17 @@
|
|||||||
margin-left: @control-padding-horizontal;
|
margin-left: @control-padding-horizontal;
|
||||||
padding: @control-padding-horizontal;
|
padding: @control-padding-horizontal;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&-disabled {
|
&-disabled {
|
||||||
color: @image-preview-operation-disabled-color;
|
color: @image-preview-operation-disabled-color;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-icon {
|
&-icon {
|
||||||
font-size: @image-preview-operation-size;
|
font-size: @image-preview-operation-size;
|
||||||
}
|
}
|
||||||
@ -149,6 +157,7 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
|
|
||||||
&-disabled {
|
&-disabled {
|
||||||
color: @image-preview-operation-disabled-color;
|
color: @image-preview-operation-disabled-color;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|||||||
@ -13,6 +13,7 @@
|
|||||||
&-group {
|
&-group {
|
||||||
.reset-component();
|
.reset-component();
|
||||||
.input-group(~'@{input-number-prefix-cls}');
|
.input-group(~'@{input-number-prefix-cls}');
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
@ -39,9 +40,11 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
border-left: @border-width-base @border-style-base @input-number-handler-border-color;
|
border-left: @border-width-base @border-style-base @input-number-handler-border-color;
|
||||||
transition: all 0.1s linear;
|
transition: all 0.1s linear;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background: @input-number-handler-active-bg;
|
background: @input-number-handler-active-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover &-up-inner,
|
&:hover &-up-inner,
|
||||||
&:hover &-down-inner {
|
&:hover &-down-inner {
|
||||||
color: @input-number-handler-hover-bg;
|
color: @input-number-handler-hover-bg;
|
||||||
@ -171,11 +174,13 @@
|
|||||||
&-handler-up {
|
&-handler-up {
|
||||||
border-top-right-radius: @border-radius-base;
|
border-top-right-radius: @border-radius-base;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&-inner {
|
&-inner {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
height: 60% !important;
|
height: 60% !important;
|
||||||
}
|
}
|
||||||
@ -186,11 +191,13 @@
|
|||||||
border-top: @border-width-base @border-style-base @border-color-base;
|
border-top: @border-width-base @border-style-base @border-color-base;
|
||||||
border-bottom-right-radius: @border-radius-base;
|
border-bottom-right-radius: @border-radius-base;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&-inner {
|
&-inner {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
height: 60% !important;
|
height: 60% !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -135,6 +135,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
|
|||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
onCompositionEnd={onInternalCompositionEnd}
|
onCompositionEnd={onInternalCompositionEnd}
|
||||||
ref={innerRef}
|
ref={innerRef}
|
||||||
|
maxLength={maxLength}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -3317,6 +3317,7 @@ exports[`renders ./components/input/demo/textarea-show-count.md correctly 1`] =
|
|||||||
>
|
>
|
||||||
<textarea
|
<textarea
|
||||||
class="ant-input"
|
class="ant-input"
|
||||||
|
maxlength="100"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@ -245,6 +245,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
|
|||||||
exports[`TextArea maxLength should support maxLength 1`] = `
|
exports[`TextArea maxLength should support maxLength 1`] = `
|
||||||
<textarea
|
<textarea
|
||||||
class="ant-input"
|
class="ant-input"
|
||||||
|
maxlength="10"
|
||||||
/>
|
/>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
@import './mixin';
|
@import './mixin';
|
||||||
|
|
||||||
@import (reference) '../../style/themes/index';
|
@import (reference) '../../style/themes/index';
|
||||||
@input-prefix-cls: ~'@{ant-prefix}-input';
|
@input-prefix-cls: ~'@{ant-prefix}-input';
|
||||||
|
|
||||||
|
|||||||
@ -15,6 +15,7 @@
|
|||||||
&-group {
|
&-group {
|
||||||
.reset-component();
|
.reset-component();
|
||||||
.input-group(~'@{input-prefix-cls}');
|
.input-group(~'@{input-prefix-cls}');
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@ -8,6 +8,7 @@
|
|||||||
direction: rtl;
|
direction: rtl;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-rtl {
|
&-rtl {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1021,70 +1021,102 @@ Array [
|
|||||||
|
|
||||||
exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
|
exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="demo-infinite-container"
|
id="scrollableDiv"
|
||||||
|
style="height:400px;overflow:auto;padding:0 16px;border:1px solid rgba(140, 140, 140, 0.35)"
|
||||||
>
|
>
|
||||||
<div>
|
<div
|
||||||
|
class="infinite-scroll-component__outerdiv"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-list ant-list-split"
|
class="infinite-scroll-component "
|
||||||
|
style="height:auto;overflow:auto;-webkit-overflow-scrolling:touch"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-spin-nested-loading"
|
class="ant-list ant-list-split"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-spin-container"
|
class="ant-spin-nested-loading"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-list-empty-text"
|
class="ant-spin-container"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-empty ant-empty-normal"
|
class="ant-list-empty-text"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-empty-image"
|
class="ant-empty ant-empty-normal"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
class="ant-empty-img-simple"
|
class="ant-empty-image"
|
||||||
height="41"
|
|
||||||
viewBox="0 0 64 41"
|
|
||||||
width="64"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
fill="none"
|
class="ant-empty-img-simple"
|
||||||
fill-rule="evenodd"
|
height="41"
|
||||||
transform="translate(0 1)"
|
viewBox="0 0 64 41"
|
||||||
|
width="64"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
>
|
>
|
||||||
<ellipse
|
|
||||||
class="ant-empty-img-simple-ellipse"
|
|
||||||
cx="32"
|
|
||||||
cy="33"
|
|
||||||
rx="32"
|
|
||||||
ry="7"
|
|
||||||
/>
|
|
||||||
<g
|
<g
|
||||||
class="ant-empty-img-simple-g"
|
fill="none"
|
||||||
fill-rule="nonzero"
|
fill-rule="evenodd"
|
||||||
|
transform="translate(0 1)"
|
||||||
>
|
>
|
||||||
<path
|
<ellipse
|
||||||
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
|
class="ant-empty-img-simple-ellipse"
|
||||||
/>
|
cx="32"
|
||||||
<path
|
cy="33"
|
||||||
class="ant-empty-img-simple-path"
|
rx="32"
|
||||||
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
|
ry="7"
|
||||||
/>
|
/>
|
||||||
|
<g
|
||||||
|
class="ant-empty-img-simple-g"
|
||||||
|
fill-rule="nonzero"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
class="ant-empty-img-simple-path"
|
||||||
|
d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
<div
|
||||||
<div
|
class="ant-empty-description"
|
||||||
class="ant-empty-description"
|
>
|
||||||
>
|
No Data
|
||||||
No Data
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-skeleton-header"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-skeleton-content"
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
class="ant-skeleton-title"
|
||||||
|
style="width:50%"
|
||||||
|
/>
|
||||||
|
<ul
|
||||||
|
class="ant-skeleton-paragraph"
|
||||||
|
>
|
||||||
|
<li />
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,127 +7,78 @@ title:
|
|||||||
|
|
||||||
## zh-CN
|
## zh-CN
|
||||||
|
|
||||||
结合 [react-infinite-scroller](https://github.com/CassetteRocks/react-infinite-scroller) 实现滚动自动加载列表。
|
结合 [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) 实现滚动自动加载列表。
|
||||||
|
|
||||||
## en-US
|
## en-US
|
||||||
|
|
||||||
The example of infinite load with [react-infinite-scroller](https://github.com/CassetteRocks/react-infinite-scroller).
|
The example of infinite load with [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component).
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { List, message, Avatar, Spin } from 'antd';
|
import React, { useState, useEffect } from 'react';
|
||||||
import reqwest from 'reqwest';
|
import { List, message, Avatar, Skeleton, Divider } from 'antd';
|
||||||
|
import InfiniteScroll from 'react-infinite-scroll-component';
|
||||||
|
|
||||||
import InfiniteScroll from 'react-infinite-scroller';
|
const InfiniteListExample = () => {
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
|
||||||
const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
|
const loadMoreData = () => {
|
||||||
|
if (loading) {
|
||||||
class InfiniteListExample extends React.Component {
|
|
||||||
state = {
|
|
||||||
data: [],
|
|
||||||
loading: false,
|
|
||||||
hasMore: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
this.fetchData(res => {
|
|
||||||
this.setState({
|
|
||||||
data: res.results,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchData = callback => {
|
|
||||||
reqwest({
|
|
||||||
url: fakeDataUrl,
|
|
||||||
type: 'json',
|
|
||||||
method: 'get',
|
|
||||||
contentType: 'application/json',
|
|
||||||
success: res => {
|
|
||||||
callback(res);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
handleInfiniteOnLoad = () => {
|
|
||||||
let { data } = this.state;
|
|
||||||
this.setState({
|
|
||||||
loading: true,
|
|
||||||
});
|
|
||||||
if (data.length > 14) {
|
|
||||||
message.warning('Infinite List loaded all');
|
|
||||||
this.setState({
|
|
||||||
hasMore: false,
|
|
||||||
loading: false,
|
|
||||||
});
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.fetchData(res => {
|
setLoading(true);
|
||||||
data = data.concat(res.results);
|
fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat&noinfo')
|
||||||
this.setState({
|
.then(res => res.json())
|
||||||
data,
|
.then(body => {
|
||||||
loading: false,
|
setData([...data, ...body.results]);
|
||||||
|
setLoading(false);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
setLoading(false);
|
||||||
});
|
});
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
useEffect(() => {
|
||||||
return (
|
loadMoreData();
|
||||||
<div className="demo-infinite-container">
|
}, []);
|
||||||
<InfiniteScroll
|
|
||||||
initialLoad={false}
|
return (
|
||||||
pageStart={0}
|
<div
|
||||||
loadMore={this.handleInfiniteOnLoad}
|
id="scrollableDiv"
|
||||||
hasMore={!this.state.loading && this.state.hasMore}
|
style={{
|
||||||
useWindow={false}
|
height: 400,
|
||||||
>
|
overflow: 'auto',
|
||||||
<List
|
padding: '0 16px',
|
||||||
dataSource={this.state.data}
|
border: '1px solid rgba(140, 140, 140, 0.35)',
|
||||||
renderItem={item => (
|
}}
|
||||||
<List.Item key={item.id}>
|
>
|
||||||
<List.Item.Meta
|
<InfiniteScroll
|
||||||
avatar={
|
dataLength={data.length}
|
||||||
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
next={loadMoreData}
|
||||||
}
|
hasMore={data.length < 50}
|
||||||
title={<a href="https://ant.design">{item.name.last}</a>}
|
loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
|
||||||
description={item.email}
|
endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
|
||||||
/>
|
scrollableTarget="scrollableDiv"
|
||||||
<div>Content</div>
|
>
|
||||||
</List.Item>
|
<List
|
||||||
)}
|
dataSource={data}
|
||||||
>
|
renderItem={item => (
|
||||||
{this.state.loading && this.state.hasMore && (
|
<List.Item key={item.id}>
|
||||||
<div className="demo-loading-container">
|
<List.Item.Meta
|
||||||
<Spin />
|
avatar={
|
||||||
</div>
|
<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
|
||||||
)}
|
}
|
||||||
</List>
|
title={<a href="https://ant.design">{item.name.last}</a>}
|
||||||
</InfiniteScroll>
|
description={item.email}
|
||||||
</div>
|
/>
|
||||||
);
|
<div>Content</div>
|
||||||
}
|
</List.Item>
|
||||||
}
|
)}
|
||||||
|
/>
|
||||||
|
</InfiniteScroll>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
ReactDOM.render(<InfiniteListExample />, mountNode);
|
ReactDOM.render(<InfiniteListExample />, mountNode);
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
|
||||||
.demo-infinite-container {
|
|
||||||
height: 300px;
|
|
||||||
padding: 8px 24px;
|
|
||||||
overflow: auto;
|
|
||||||
border: 1px solid #e8e8e8;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.demo-loading-container {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 40px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
<style>
|
|
||||||
[data-theme="dark"] .demo-infinite-container {
|
|
||||||
border: 1px solid #303030;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -19,9 +19,7 @@ An example of infinite list & virtualized loading using [react-virtualized](http
|
|||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { List, message, Avatar, Spin } from 'antd';
|
import { List, message, Avatar, Spin } from 'antd';
|
||||||
|
|
||||||
import reqwest from 'reqwest';
|
import reqwest from 'reqwest';
|
||||||
|
|
||||||
import WindowScroller from 'react-virtualized/dist/commonjs/WindowScroller';
|
import WindowScroller from 'react-virtualized/dist/commonjs/WindowScroller';
|
||||||
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
|
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
|
||||||
import VList from 'react-virtualized/dist/commonjs/List';
|
import VList from 'react-virtualized/dist/commonjs/List';
|
||||||
|
|||||||
@ -15,7 +15,6 @@ Load more list with `loadMore` property.
|
|||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { List, Avatar, Button, Skeleton } from 'antd';
|
import { List, Avatar, Button, Skeleton } from 'antd';
|
||||||
|
|
||||||
import reqwest from 'reqwest';
|
import reqwest from 'reqwest';
|
||||||
|
|
||||||
const count = 3;
|
const count = 3;
|
||||||
|
|||||||
@ -26,6 +26,7 @@
|
|||||||
&-more {
|
&-more {
|
||||||
margin-top: @margin-sm;
|
margin-top: @margin-sm;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
padding-right: 32px;
|
padding-right: 32px;
|
||||||
padding-left: 32px;
|
padding-left: 32px;
|
||||||
@ -66,30 +67,36 @@
|
|||||||
&-avatar {
|
&-avatar {
|
||||||
margin-right: @list-item-meta-avatar-margin-right;
|
margin-right: @list-item-meta-avatar-margin-right;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-content {
|
&-content {
|
||||||
flex: 1 0;
|
flex: 1 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
line-height: @line-height-base;
|
line-height: @line-height-base;
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @primary-color;
|
color: @primary-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-description {
|
&-description {
|
||||||
color: @text-color-secondary;
|
color: @text-color-secondary;
|
||||||
font-size: @list-item-meta-description-font-size;
|
font-size: @list-item-meta-description-font-size;
|
||||||
line-height: @line-height-base;
|
line-height: @line-height-base;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-action {
|
&-action {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
margin-left: 48px;
|
margin-left: 48px;
|
||||||
@ -146,6 +153,7 @@
|
|||||||
|
|
||||||
&-split &-item {
|
&-split &-item {
|
||||||
border-bottom: 1px solid @border-color-split;
|
border-bottom: 1px solid @border-color-split;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
@ -204,6 +212,7 @@
|
|||||||
|
|
||||||
> li {
|
> li {
|
||||||
padding: 0 @padding-md;
|
padding: 0 @padding-md;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,6 +20,7 @@
|
|||||||
.@{list-prefix-cls} {
|
.@{list-prefix-cls} {
|
||||||
&-item {
|
&-item {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
&-action {
|
&-action {
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
@ -29,9 +30,11 @@
|
|||||||
.@{list-prefix-cls}-vertical {
|
.@{list-prefix-cls}-vertical {
|
||||||
.@{list-prefix-cls}-item {
|
.@{list-prefix-cls}-item {
|
||||||
flex-wrap: wrap-reverse;
|
flex-wrap: wrap-reverse;
|
||||||
|
|
||||||
&-main {
|
&-main {
|
||||||
min-width: 220px;
|
min-width: 220px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-extra {
|
&-extra {
|
||||||
margin: auto auto 16px;
|
margin: auto auto 16px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,6 +8,7 @@
|
|||||||
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||||
opacity: 0.45;
|
opacity: 0.45;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
|
||||||
&::after,
|
&::after,
|
||||||
&::before {
|
&::before {
|
||||||
background: @menu-dark-arrow-color;
|
background: @menu-dark-arrow-color;
|
||||||
@ -65,6 +66,7 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
@ -83,6 +85,7 @@
|
|||||||
&-dark &-submenu-title:hover {
|
&-dark &-submenu-title:hover {
|
||||||
color: @menu-dark-highlight-color;
|
color: @menu-dark-highlight-color;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
||||||
> a,
|
> a,
|
||||||
> span > a {
|
> span > a {
|
||||||
color: @menu-dark-highlight-color;
|
color: @menu-dark-highlight-color;
|
||||||
@ -90,6 +93,7 @@
|
|||||||
> .@{menu-prefix-cls}-submenu-title {
|
> .@{menu-prefix-cls}-submenu-title {
|
||||||
> .@{menu-prefix-cls}-submenu-arrow {
|
> .@{menu-prefix-cls}-submenu-arrow {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
||||||
&::after,
|
&::after,
|
||||||
&::before {
|
&::before {
|
||||||
background: @menu-dark-highlight-color;
|
background: @menu-dark-highlight-color;
|
||||||
@ -97,6 +101,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-dark &-item:hover {
|
&-dark &-item:hover {
|
||||||
background-color: @menu-dark-item-hover-bg;
|
background-color: @menu-dark-item-hover-bg;
|
||||||
}
|
}
|
||||||
@ -108,9 +113,11 @@
|
|||||||
&-dark &-item-selected {
|
&-dark &-item-selected {
|
||||||
color: @menu-dark-highlight-color;
|
color: @menu-dark-highlight-color;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> a,
|
> a,
|
||||||
> span > a,
|
> span > a,
|
||||||
> a:hover,
|
> a:hover,
|
||||||
|
|||||||
@ -67,6 +67,7 @@
|
|||||||
transition: border-color @animation-duration-slow @ease-in-out,
|
transition: border-color @animation-duration-slow @ease-in-out,
|
||||||
background @animation-duration-slow @ease-in-out;
|
background @animation-duration-slow @ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-submenu,
|
&-submenu,
|
||||||
&-submenu-inline {
|
&-submenu-inline {
|
||||||
transition: border-color @animation-duration-slow @ease-in-out,
|
transition: border-color @animation-duration-slow @ease-in-out,
|
||||||
@ -95,9 +96,11 @@
|
|||||||
|
|
||||||
&-item a {
|
&-item a {
|
||||||
color: @menu-item-color;
|
color: @menu-item-color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -112,6 +115,7 @@
|
|||||||
// https://github.com/ant-design/ant-design/issues/19809
|
// https://github.com/ant-design/ant-design/issues/19809
|
||||||
&-item > .@{ant-prefix}-badge a {
|
&-item > .@{ant-prefix}-badge a {
|
||||||
color: @menu-item-color;
|
color: @menu-item-color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
}
|
}
|
||||||
@ -142,6 +146,7 @@
|
|||||||
|
|
||||||
&-item-selected {
|
&-item-selected {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
|
|
||||||
a,
|
a,
|
||||||
a:hover {
|
a:hover {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
@ -182,6 +187,7 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
@ -218,6 +224,7 @@
|
|||||||
font-size: @menu-icon-size;
|
font-size: @menu-icon-size;
|
||||||
transition: font-size @menu-animation-duration-normal @ease-out,
|
transition: font-size @menu-animation-duration-normal @ease-out,
|
||||||
margin @animation-duration-slow @ease-in-out, color @animation-duration-slow;
|
margin @animation-duration-slow @ease-in-out, color @animation-duration-slow;
|
||||||
|
|
||||||
+ span {
|
+ span {
|
||||||
margin-left: @menu-icon-margin-right;
|
margin-left: @menu-icon-margin-right;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -280,6 +287,7 @@
|
|||||||
> .@{menu-prefix-cls} {
|
> .@{menu-prefix-cls} {
|
||||||
background-color: @menu-bg;
|
background-color: @menu-bg;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
|
|
||||||
&-submenu-title::after {
|
&-submenu-title::after {
|
||||||
transition: transform @animation-duration-slow @ease-in-out;
|
transition: transform @animation-duration-slow @ease-in-out;
|
||||||
}
|
}
|
||||||
@ -314,9 +322,11 @@
|
|||||||
color @animation-duration-slow @ease-in-out;
|
color @animation-duration-slow @ease-in-out;
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
transform: rotate(45deg) translateY(-2.5px);
|
transform: rotate(45deg) translateY(-2.5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
transform: rotate(-45deg) translateY(2.5px);
|
transform: rotate(-45deg) translateY(2.5px);
|
||||||
}
|
}
|
||||||
@ -333,6 +343,7 @@
|
|||||||
&::before {
|
&::before {
|
||||||
transform: rotate(-45deg) translateX(2.5px);
|
transform: rotate(-45deg) translateX(2.5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
transform: rotate(45deg) translateX(-2.5px);
|
transform: rotate(45deg) translateX(-2.5px);
|
||||||
}
|
}
|
||||||
@ -345,9 +356,11 @@
|
|||||||
&-open&-inline > &-title > &-arrow {
|
&-open&-inline > &-title > &-arrow {
|
||||||
// ↑
|
// ↑
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
transform: rotate(-45deg) translateX(-2.5px);
|
transform: rotate(-45deg) translateX(-2.5px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
transform: rotate(45deg) translateX(2.5px);
|
transform: rotate(45deg) translateX(2.5px);
|
||||||
}
|
}
|
||||||
@ -411,13 +424,16 @@
|
|||||||
> .@{menu-prefix-cls}-item {
|
> .@{menu-prefix-cls}-item {
|
||||||
a {
|
a {
|
||||||
color: @menu-item-color;
|
color: @menu-item-color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
bottom: -2px;
|
bottom: -2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-selected a {
|
&-selected a {
|
||||||
color: @menu-highlight-color;
|
color: @menu-highlight-color;
|
||||||
}
|
}
|
||||||
@ -437,6 +453,7 @@
|
|||||||
&-inline {
|
&-inline {
|
||||||
.@{menu-prefix-cls}-item {
|
.@{menu-prefix-cls}-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -555,6 +572,7 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: @menu-icon-size-lg;
|
font-size: @menu-icon-size-lg;
|
||||||
line-height: @menu-item-height;
|
line-height: @menu-item-height;
|
||||||
|
|
||||||
+ span {
|
+ span {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -574,6 +592,7 @@
|
|||||||
.@{iconfont-css-prefix} {
|
.@{iconfont-css-prefix} {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: @text-color-dark;
|
color: @text-color-dark;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -87,6 +87,7 @@
|
|||||||
transform: rotate(-45deg) translateY(-2px);
|
transform: rotate(-45deg) translateY(-2px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
.@{menu-prefix-cls}-rtl & {
|
.@{menu-prefix-cls}-rtl & {
|
||||||
transform: rotate(45deg) translateY(2px);
|
transform: rotate(45deg) translateY(2px);
|
||||||
|
|||||||
@ -17,6 +17,7 @@
|
|||||||
|
|
||||||
&-selected {
|
&-selected {
|
||||||
color: @menu-highlight-danger-color;
|
color: @menu-highlight-danger-color;
|
||||||
|
|
||||||
> a,
|
> a,
|
||||||
> a:hover {
|
> a:hover {
|
||||||
color: @menu-highlight-danger-color;
|
color: @menu-highlight-danger-color;
|
||||||
|
|||||||
@ -63,6 +63,7 @@
|
|||||||
padding: 8px;
|
padding: 8px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|||||||
@ -106,6 +106,7 @@
|
|||||||
|
|
||||||
.@{dialog-prefix-cls}-centered {
|
.@{dialog-prefix-cls}-centered {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 0;
|
width: 0;
|
||||||
|
|||||||
@ -50,6 +50,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-btns {
|
&-btns {
|
||||||
.@{dialog-wrap-rtl-cls} & {
|
.@{dialog-wrap-rtl-cls} & {
|
||||||
float: left;
|
float: left;
|
||||||
|
|||||||
@ -69,6 +69,7 @@
|
|||||||
max-width: 4px;
|
max-width: 4px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: block;
|
display: block;
|
||||||
content: '';
|
content: '';
|
||||||
@ -109,12 +110,15 @@
|
|||||||
&-success {
|
&-success {
|
||||||
color: @success-color;
|
color: @success-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-info {
|
&-info {
|
||||||
color: @info-color;
|
color: @info-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-warning {
|
&-warning {
|
||||||
color: @warning-color;
|
color: @warning-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-error {
|
&-error {
|
||||||
color: @error-color;
|
color: @error-color;
|
||||||
}
|
}
|
||||||
@ -181,6 +185,7 @@
|
|||||||
left: @notification-width;
|
left: @notification-width;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
left: 0;
|
left: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -192,6 +197,7 @@
|
|||||||
right: @notification-width;
|
right: @notification-width;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
right: 0;
|
right: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -204,6 +210,7 @@
|
|||||||
margin-bottom: @notification-margin-bottom;
|
margin-bottom: @notification-margin-bottom;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|||||||
@ -90,6 +90,7 @@
|
|||||||
margin-left: @margin-sm;
|
margin-left: @margin-sm;
|
||||||
white-space: unset;
|
white-space: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
> *:first-child {
|
> *:first-child {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -105,6 +106,7 @@
|
|||||||
.@{ant-prefix}-tabs {
|
.@{ant-prefix}-tabs {
|
||||||
> .@{ant-prefix}-tabs-nav {
|
> .@{ant-prefix}-tabs-nav {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -56,6 +56,7 @@
|
|||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> *:first-child {
|
> *:first-child {
|
||||||
.@{pageheader-prefix-cls}-rtl & {
|
.@{pageheader-prefix-cls}-rtl & {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
|||||||
@ -63,6 +63,7 @@
|
|||||||
&:hover {
|
&:hover {
|
||||||
border-color: @primary-color;
|
border-color: @primary-color;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: @primary-color;
|
color: @primary-color;
|
||||||
}
|
}
|
||||||
@ -101,6 +102,7 @@
|
|||||||
letter-spacing: -1px;
|
letter-spacing: -1px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
&-svg {
|
&-svg {
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -144,6 +146,7 @@
|
|||||||
&-jump-next {
|
&-jump-next {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-prev,
|
&-prev,
|
||||||
&-next,
|
&-next,
|
||||||
&-jump-prev,
|
&-jump-prev,
|
||||||
@ -259,6 +262,7 @@
|
|||||||
height: @pagination-item-size-sm;
|
height: @pagination-item-size-sm;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
height: @pagination-item-size-sm;
|
height: @pagination-item-size-sm;
|
||||||
line-height: @pagination-item-size-sm;
|
line-height: @pagination-item-size-sm;
|
||||||
@ -326,6 +330,7 @@
|
|||||||
&.mini &-next &-item-link {
|
&.mini &-next &-item-link {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
height: @pagination-item-size-sm;
|
height: @pagination-item-size-sm;
|
||||||
line-height: @pagination-item-size-sm;
|
line-height: @pagination-item-size-sm;
|
||||||
@ -377,6 +382,7 @@
|
|||||||
|
|
||||||
&-active {
|
&-active {
|
||||||
background: @pagination-item-disabled-bg-active;
|
background: @pagination-item-disabled-bg-active;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: @pagination-item-disabled-color-active;
|
color: @pagination-item-disabled-color-active;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -99,6 +99,7 @@
|
|||||||
color: @warning-color;
|
color: @warning-color;
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
padding-left: @font-size-base + 8px;
|
padding-left: @font-size-base + 8px;
|
||||||
}
|
}
|
||||||
@ -149,6 +150,7 @@
|
|||||||
transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg);
|
transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-placement-top &-arrow {
|
&-placement-top &-arrow {
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
@ -172,13 +174,16 @@
|
|||||||
transform: translateX((@popover-arrow-rotate-width / 2)) rotate(45deg);
|
transform: translateX((@popover-arrow-rotate-width / 2)) rotate(45deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-placement-right &-arrow {
|
&-placement-right &-arrow {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-placement-rightTop &-arrow {
|
&-placement-rightTop &-arrow {
|
||||||
top: @popover-arrow-offset-vertical;
|
top: @popover-arrow-offset-vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-placement-rightBottom &-arrow {
|
&-placement-rightBottom &-arrow {
|
||||||
bottom: @popover-arrow-offset-vertical;
|
bottom: @popover-arrow-offset-vertical;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,11 +16,13 @@
|
|||||||
|
|
||||||
&-steps {
|
&-steps {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
&-outer {
|
&-outer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-item {
|
&-item {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
min-width: 2px;
|
min-width: 2px;
|
||||||
@ -180,6 +182,7 @@
|
|||||||
color: @error-color;
|
color: @error-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-circle&-status-success {
|
&-circle&-status-success {
|
||||||
.@{progress-prefix-cls}-text {
|
.@{progress-prefix-cls}-text {
|
||||||
color: @success-color;
|
color: @success-color;
|
||||||
@ -192,10 +195,12 @@
|
|||||||
transform: translateX(-100%) scaleX(0);
|
transform: translateX(-100%) scaleX(0);
|
||||||
opacity: 0.1;
|
opacity: 0.1;
|
||||||
}
|
}
|
||||||
|
|
||||||
20% {
|
20% {
|
||||||
transform: translateX(-100%) scaleX(0);
|
transform: translateX(-100%) scaleX(0);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(0) scaleX(1);
|
transform: translateX(0) scaleX(1);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|||||||
@ -1,17 +1,15 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { mount, render } from 'enzyme';
|
import { mount, render } from 'enzyme';
|
||||||
import Radio from '../radio';
|
import Radio from '..';
|
||||||
import RadioGroup from '../group';
|
|
||||||
import RadioButton from '../radioButton';
|
|
||||||
|
|
||||||
describe('Radio Group', () => {
|
describe('Radio Group', () => {
|
||||||
function createRadioGroup(props) {
|
function createRadioGroup(props) {
|
||||||
return (
|
return (
|
||||||
<RadioGroup {...props}>
|
<Radio.Group {...props}>
|
||||||
<Radio value="A">A</Radio>
|
<Radio value="A">A</Radio>
|
||||||
<Radio value="B">B</Radio>
|
<Radio value="B">B</Radio>
|
||||||
<Radio value="C">C</Radio>
|
<Radio value="C">C</Radio>
|
||||||
</RadioGroup>
|
</Radio.Group>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -22,7 +20,7 @@ describe('Radio Group', () => {
|
|||||||
{ label: 'C', value: 'C' },
|
{ label: 'C', value: 'C' },
|
||||||
];
|
];
|
||||||
|
|
||||||
return <RadioGroup {...props} options={options} />;
|
return <Radio.Group {...props} options={options} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
it('responses hover events', () => {
|
it('responses hover events', () => {
|
||||||
@ -30,9 +28,9 @@ describe('Radio Group', () => {
|
|||||||
const onMouseLeave = jest.fn();
|
const onMouseLeave = jest.fn();
|
||||||
|
|
||||||
const wrapper = mount(
|
const wrapper = mount(
|
||||||
<RadioGroup onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
|
<Radio.Group onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
|
||||||
<Radio />
|
<Radio />
|
||||||
</RadioGroup>,
|
</Radio.Group>,
|
||||||
);
|
);
|
||||||
|
|
||||||
wrapper.find('div').at(0).simulate('mouseenter');
|
wrapper.find('div').at(0).simulate('mouseenter');
|
||||||
@ -63,7 +61,7 @@ describe('Radio Group', () => {
|
|||||||
const onChangeRadioGroup = jest.fn();
|
const onChangeRadioGroup = jest.fn();
|
||||||
|
|
||||||
const wrapper = mount(
|
const wrapper = mount(
|
||||||
<RadioGroup onChange={onChangeRadioGroup}>
|
<Radio.Group onChange={onChangeRadioGroup}>
|
||||||
<Radio value="A" onChange={onChange}>
|
<Radio value="A" onChange={onChange}>
|
||||||
A
|
A
|
||||||
</Radio>
|
</Radio>
|
||||||
@ -73,7 +71,7 @@ describe('Radio Group', () => {
|
|||||||
<Radio value="C" onChange={onChange}>
|
<Radio value="C" onChange={onChange}>
|
||||||
C
|
C
|
||||||
</Radio>
|
</Radio>
|
||||||
</RadioGroup>,
|
</Radio.Group>,
|
||||||
);
|
);
|
||||||
const radios = wrapper.find('input');
|
const radios = wrapper.find('input');
|
||||||
|
|
||||||
@ -87,11 +85,11 @@ describe('Radio Group', () => {
|
|||||||
const onChange = jest.fn();
|
const onChange = jest.fn();
|
||||||
|
|
||||||
const wrapper = mount(
|
const wrapper = mount(
|
||||||
<RadioGroup onChange={onChange}>
|
<Radio.Group onChange={onChange}>
|
||||||
<RadioButton value="A">A</RadioButton>
|
<Radio.Button value="A">A</Radio.Button>
|
||||||
<RadioButton value="B">B</RadioButton>
|
<Radio.Button value="B">B</Radio.Button>
|
||||||
<RadioButton value="C">C</RadioButton>
|
<Radio.Button value="C">C</Radio.Button>
|
||||||
</RadioGroup>,
|
</Radio.Group>,
|
||||||
);
|
);
|
||||||
const radios = wrapper.find('input');
|
const radios = wrapper.find('input');
|
||||||
|
|
||||||
@ -104,7 +102,7 @@ describe('Radio Group', () => {
|
|||||||
it('should only trigger once when in group with options', () => {
|
it('should only trigger once when in group with options', () => {
|
||||||
const onChange = jest.fn();
|
const onChange = jest.fn();
|
||||||
const options = [{ label: 'Bamboo', value: 'Bamboo' }];
|
const options = [{ label: 'Bamboo', value: 'Bamboo' }];
|
||||||
const wrapper = mount(<RadioGroup options={options} onChange={onChange} />);
|
const wrapper = mount(<Radio.Group options={options} onChange={onChange} />);
|
||||||
|
|
||||||
wrapper.find('input').simulate('change');
|
wrapper.find('input').simulate('change');
|
||||||
expect(onChange).toHaveBeenCalledTimes(1);
|
expect(onChange).toHaveBeenCalledTimes(1);
|
||||||
@ -147,9 +145,7 @@ describe('Radio Group', () => {
|
|||||||
{ label: 'Apple', value: 'Apple' },
|
{ label: 'Apple', value: 'Apple' },
|
||||||
{ label: 'Orange', value: 'Orange', style: { fontSize: 12 } },
|
{ label: 'Orange', value: 'Orange', style: { fontSize: 12 } },
|
||||||
];
|
];
|
||||||
|
const wrapper = render(<Radio.Group prefixCls="my-radio" options={options} />);
|
||||||
const wrapper = render(<RadioGroup prefixCls="my-radio" options={options} />);
|
|
||||||
|
|
||||||
expect(wrapper).toMatchSnapshot();
|
expect(wrapper).toMatchSnapshot();
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -166,11 +162,46 @@ describe('Radio Group', () => {
|
|||||||
expect(radioGroupRef).toBe(wrapper.children().getDOMNode());
|
expect(radioGroupRef).toBe(wrapper.children().getDOMNode());
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should support data-* or aria-* props', () => {
|
||||||
|
const wrapper = mount(
|
||||||
|
createRadioGroup({
|
||||||
|
'data-radio-group-id': 'radio-group-id',
|
||||||
|
'aria-label': 'radio-group',
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
expect(wrapper.getDOMNode().getAttribute('data-radio-group-id')).toBe('radio-group-id');
|
||||||
|
expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('radio-group');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('Radio type should not be override', () => {
|
||||||
|
const onChange = jest.fn();
|
||||||
|
const wrapper = mount(
|
||||||
|
<Radio.Group onChange={onChange}>
|
||||||
|
<Radio value={1} type="1">
|
||||||
|
A
|
||||||
|
</Radio>
|
||||||
|
<Radio value={2} type="2">
|
||||||
|
B
|
||||||
|
</Radio>
|
||||||
|
<Radio value={3} type="3">
|
||||||
|
C
|
||||||
|
</Radio>
|
||||||
|
<Radio value={4} type="4">
|
||||||
|
D
|
||||||
|
</Radio>
|
||||||
|
</Radio.Group>,
|
||||||
|
);
|
||||||
|
const radios = wrapper.find('input');
|
||||||
|
radios.at(1).simulate('change');
|
||||||
|
expect(onChange).toHaveBeenCalled();
|
||||||
|
expect(radios.at(1).getDOMNode().type).toBe('radio');
|
||||||
|
});
|
||||||
|
|
||||||
describe('value is null or undefined', () => {
|
describe('value is null or undefined', () => {
|
||||||
it('use `defaultValue` when `value` is undefined', () => {
|
it('use `defaultValue` when `value` is undefined', () => {
|
||||||
const options = [{ label: 'Bamboo', value: 'bamboo' }];
|
const options = [{ label: 'Bamboo', value: 'bamboo' }];
|
||||||
const wrapper = mount(
|
const wrapper = mount(
|
||||||
<RadioGroup defaultValue="bamboo" value={undefined} options={options} />,
|
<Radio.Group defaultValue="bamboo" value={undefined} options={options} />,
|
||||||
);
|
);
|
||||||
expect(wrapper.find('.ant-radio-wrapper').at(0).hasClass('ant-radio-wrapper-checked')).toBe(
|
expect(wrapper.find('.ant-radio-wrapper').at(0).hasClass('ant-radio-wrapper-checked')).toBe(
|
||||||
true,
|
true,
|
||||||
@ -180,7 +211,7 @@ describe('Radio Group', () => {
|
|||||||
[undefined, null].forEach(newValue => {
|
[undefined, null].forEach(newValue => {
|
||||||
it(`should set value back when value change back to ${newValue}`, () => {
|
it(`should set value back when value change back to ${newValue}`, () => {
|
||||||
const options = [{ label: 'Bamboo', value: 'bamboo' }];
|
const options = [{ label: 'Bamboo', value: 'bamboo' }];
|
||||||
const wrapper = mount(<RadioGroup value="bamboo" options={options} />);
|
const wrapper = mount(<Radio.Group value="bamboo" options={options} />);
|
||||||
expect(wrapper.find('.ant-radio-wrapper').at(0).hasClass('ant-radio-wrapper-checked')).toBe(
|
expect(wrapper.find('.ant-radio-wrapper').at(0).hasClass('ant-radio-wrapper-checked')).toBe(
|
||||||
true,
|
true,
|
||||||
);
|
);
|
||||||
@ -192,15 +223,4 @@ describe('Radio Group', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should support data-* or aria-* props', () => {
|
|
||||||
const wrapper = mount(
|
|
||||||
createRadioGroup({
|
|
||||||
'data-radio-group-id': 'radio-group-id',
|
|
||||||
'aria-label': 'radio-group',
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
expect(wrapper.getDOMNode().getAttribute('data-radio-group-id')).toBe('radio-group-id');
|
|
||||||
expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('radio-group');
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|||||||
@ -49,7 +49,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
|
|||||||
onMouseEnter={props.onMouseEnter}
|
onMouseEnter={props.onMouseEnter}
|
||||||
onMouseLeave={props.onMouseLeave}
|
onMouseLeave={props.onMouseLeave}
|
||||||
>
|
>
|
||||||
<RcCheckbox {...radioProps} prefixCls={prefixCls} ref={mergedRef} />
|
<RcCheckbox {...radioProps} type="radio" prefixCls={prefixCls} ref={mergedRef} />
|
||||||
{children !== undefined ? <span>{children}</span> : null}
|
{children !== undefined ? <span>{children}</span> : null}
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
@ -59,8 +59,4 @@ const Radio = React.forwardRef<unknown, RadioProps>(InternalRadio);
|
|||||||
|
|
||||||
Radio.displayName = 'Radio';
|
Radio.displayName = 'Radio';
|
||||||
|
|
||||||
Radio.defaultProps = {
|
|
||||||
type: 'radio',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Radio;
|
export default Radio;
|
||||||
|
|||||||
@ -126,6 +126,7 @@
|
|||||||
.@{radio-prefix-cls}-checked {
|
.@{radio-prefix-cls}-checked {
|
||||||
.@{radio-inner-prefix-cls} {
|
.@{radio-inner-prefix-cls} {
|
||||||
border-color: @radio-dot-color;
|
border-color: @radio-dot-color;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -141,6 +142,7 @@
|
|||||||
background-color: @input-disabled-bg;
|
background-color: @input-disabled-bg;
|
||||||
border-color: @border-color-base !important;
|
border-color: @border-color-base !important;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background-color: @radio-dot-disabled-color;
|
background-color: @radio-dot-disabled-color;
|
||||||
}
|
}
|
||||||
@ -268,6 +270,7 @@ span.@{radio-prefix-cls} + * {
|
|||||||
&:hover {
|
&:hover {
|
||||||
color: @radio-button-hover-color;
|
color: @radio-button-hover-color;
|
||||||
border-color: @radio-button-hover-color;
|
border-color: @radio-button-hover-color;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
background-color: @radio-button-hover-color;
|
background-color: @radio-button-hover-color;
|
||||||
}
|
}
|
||||||
@ -276,6 +279,7 @@ span.@{radio-prefix-cls} + * {
|
|||||||
&:active {
|
&:active {
|
||||||
color: @radio-button-active-color;
|
color: @radio-button-active-color;
|
||||||
border-color: @radio-button-active-color;
|
border-color: @radio-button-active-color;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
background-color: @radio-button-active-color;
|
background-color: @radio-button-active-color;
|
||||||
}
|
}
|
||||||
@ -290,16 +294,19 @@ span.@{radio-prefix-cls} + * {
|
|||||||
color: @radio-solid-checked-color;
|
color: @radio-solid-checked-color;
|
||||||
background: @radio-dot-color;
|
background: @radio-dot-color;
|
||||||
border-color: @radio-dot-color;
|
border-color: @radio-dot-color;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @radio-solid-checked-color;
|
color: @radio-solid-checked-color;
|
||||||
background: @radio-button-hover-color;
|
background: @radio-button-hover-color;
|
||||||
border-color: @radio-button-hover-color;
|
border-color: @radio-button-hover-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
color: @radio-solid-checked-color;
|
color: @radio-solid-checked-color;
|
||||||
background: @radio-button-active-color;
|
background: @radio-button-active-color;
|
||||||
border-color: @radio-button-active-color;
|
border-color: @radio-button-active-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus-within {
|
&:focus-within {
|
||||||
box-shadow: @radio-button-focus-shadow;
|
box-shadow: @radio-button-focus-shadow;
|
||||||
}
|
}
|
||||||
@ -317,6 +324,7 @@ span.@{radio-prefix-cls} + * {
|
|||||||
background-color: @input-disabled-bg;
|
background-color: @input-disabled-bg;
|
||||||
border-color: @border-color-base;
|
border-color: @border-color-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
border-left-color: @border-color-base;
|
border-left-color: @border-color-base;
|
||||||
}
|
}
|
||||||
@ -335,6 +343,7 @@ span.@{radio-prefix-cls} + * {
|
|||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1.6);
|
transform: scale(1.6);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|||||||
@ -17,6 +17,7 @@
|
|||||||
|
|
||||||
&-disabled &-star {
|
&-disabled &-star {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -55,6 +55,7 @@
|
|||||||
&-extra {
|
&-extra {
|
||||||
margin: @result-extra-margin;
|
margin: @result-extra-margin;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
@import '../../style/themes/index';
|
@import '../../style/themes/index';
|
||||||
@import '../../style/mixins/index';
|
@import '../../style/mixins/index';
|
||||||
@import '../../input/style/mixin';
|
@import '../../input/style/mixin';
|
||||||
|
|
||||||
@import './single';
|
@import './single';
|
||||||
@import './multiple';
|
@import './multiple';
|
||||||
|
|
||||||
@ -167,9 +166,11 @@
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: color 0.3s ease, opacity 0.15s ease;
|
transition: color 0.3s ease, opacity 0.15s ease;
|
||||||
text-rendering: auto;
|
text-rendering: auto;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @text-color-secondary;
|
color: @text-color-secondary;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -271,6 +271,7 @@
|
|||||||
0% {
|
0% {
|
||||||
background-position: 100% 50%;
|
background-position: 100% 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
background-position: 0 50%;
|
background-position: 0 50%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -41,6 +41,7 @@
|
|||||||
0% {
|
0% {
|
||||||
background-position: 0% 50%;
|
background-position: 0% 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
background-position: 100% 50%;
|
background-position: 100% 50%;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -120,9 +120,11 @@
|
|||||||
&:first-child {
|
&:first-child {
|
||||||
margin-left: -4px;
|
margin-left: -4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-left: -4px;
|
margin-left: -4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-active {
|
&-active {
|
||||||
border-color: @slider-dot-border-color-active;
|
border-color: @slider-dot-border-color-active;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,6 +6,7 @@
|
|||||||
|
|
||||||
.@{space-prefix-cls} {
|
.@{space-prefix-cls} {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|
||||||
&-vertical {
|
&-vertical {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
@ -14,12 +15,15 @@
|
|||||||
&-center {
|
&-center {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-start {
|
&-start {
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-end {
|
&-end {
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-baseline {
|
&-baseline {
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -142,16 +142,19 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
animation-delay: 0.4s;
|
animation-delay: 0.4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
animation-delay: 0.8s;
|
animation-delay: 0.8s;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-child(4) {
|
&:nth-child(4) {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|||||||
@ -74,6 +74,7 @@
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-tail {
|
&-tail {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 12px;
|
top: 12px;
|
||||||
@ -91,6 +92,7 @@
|
|||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -110,6 +112,7 @@
|
|||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-subtitle {
|
&-subtitle {
|
||||||
display: inline;
|
display: inline;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
@ -117,18 +120,21 @@
|
|||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-description {
|
&-description {
|
||||||
color: @text-color-secondary;
|
color: @text-color-secondary;
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
}
|
}
|
||||||
.step-item-status(wait);
|
.step-item-status(wait);
|
||||||
.step-item-status(process);
|
.step-item-status(process);
|
||||||
|
|
||||||
&-process > &-container > &-icon {
|
&-process > &-container > &-icon {
|
||||||
background: @process-icon-color;
|
background: @process-icon-color;
|
||||||
.@{steps-prefix-cls}-icon {
|
.@{steps-prefix-cls}-icon {
|
||||||
color: @process-icon-text-color;
|
color: @process-icon-text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-process > &-container > &-title {
|
&-process > &-container > &-title {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@ -197,9 +203,11 @@
|
|||||||
&:last-child .@{steps-prefix-cls}-item-title {
|
&:last-child .@{steps-prefix-cls}-item-title {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-tail {
|
&-tail {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-description {
|
&-description {
|
||||||
max-width: @steps-description-max-width;
|
max-width: @steps-description-max-width;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
@ -224,6 +232,7 @@
|
|||||||
}
|
}
|
||||||
&-@{status} > &-container > &-content > &-title {
|
&-@{status} > &-container > &-content > &-title {
|
||||||
color: @@title-color;
|
color: @@title-color;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
background-color: @@tail-color;
|
background-color: @@tail-color;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,27 +1,33 @@
|
|||||||
.@{steps-prefix-cls}-label-vertical {
|
.@{steps-prefix-cls}-label-vertical {
|
||||||
.@{steps-prefix-cls}-item {
|
.@{steps-prefix-cls}-item {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
|
|
||||||
&-tail {
|
&-tail {
|
||||||
margin-left: 58px;
|
margin-left: 58px;
|
||||||
padding: 3.5px 24px;
|
padding: 3.5px 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-content {
|
&-content {
|
||||||
display: block;
|
display: block;
|
||||||
width: ((@steps-icon-size / 2) + 42px) * 2;
|
width: ((@steps-icon-size / 2) + 42px) * 2;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-icon {
|
&-icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-left: 42px;
|
margin-left: 42px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-subtitle {
|
&-subtitle {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
|||||||
@ -41,6 +41,7 @@
|
|||||||
&:not(.@{steps-prefix-cls}-item-active) {
|
&:not(.@{steps-prefix-cls}-item-active) {
|
||||||
.@{steps-prefix-cls}-item-container[role='button'] {
|
.@{steps-prefix-cls}-item-container[role='button'] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 0.85;
|
opacity: 0.85;
|
||||||
}
|
}
|
||||||
@ -49,6 +50,7 @@
|
|||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -93,6 +95,7 @@
|
|||||||
.@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-vertical {
|
.@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-vertical {
|
||||||
> .@{steps-prefix-cls}-item {
|
> .@{steps-prefix-cls}-item {
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -104,6 +107,7 @@
|
|||||||
width: 3px;
|
width: 3px;
|
||||||
height: calc(100% - 24px);
|
height: calc(100% - 24px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -2px;
|
top: -2px;
|
||||||
|
|||||||
@ -4,6 +4,7 @@
|
|||||||
&-title {
|
&-title {
|
||||||
line-height: @line-height-base;
|
line-height: @line-height-base;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-tail {
|
&-tail {
|
||||||
top: @steps-dot-top;
|
top: @steps-dot-top;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -19,6 +20,7 @@
|
|||||||
&:first-child .@{steps-prefix-cls}-icon-dot {
|
&:first-child .@{steps-prefix-cls}-icon-dot {
|
||||||
left: 2px;
|
left: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-icon {
|
&-icon {
|
||||||
width: @steps-dot-size;
|
width: @steps-dot-size;
|
||||||
height: @steps-dot-size;
|
height: @steps-dot-size;
|
||||||
@ -47,6 +49,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-content {
|
&-content {
|
||||||
width: @steps-description-max-width;
|
width: @steps-description-max-width;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -193,6 +193,7 @@
|
|||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-icon {
|
&-icon {
|
||||||
.@{steps-prefix-cls}-rtl& {
|
.@{steps-prefix-cls}-rtl& {
|
||||||
margin-right: 67px;
|
margin-right: 67px;
|
||||||
|
|||||||
@ -20,6 +20,7 @@
|
|||||||
padding-right: 12px;
|
padding-right: 12px;
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
line-height: @steps-small-icon-size;
|
line-height: @steps-small-icon-size;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
top: (@steps-small-icon-size / 2);
|
top: (@steps-small-icon-size / 2);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -199,6 +199,7 @@ sup {
|
|||||||
sub {
|
sub {
|
||||||
bottom: -0.25em;
|
bottom: -0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
sup {
|
sup {
|
||||||
top: -0.5em;
|
top: -0.5em;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,6 +8,7 @@
|
|||||||
// For common/openAnimation
|
// For common/openAnimation
|
||||||
.ant-motion-collapse-legacy {
|
.ant-motion-collapse-legacy {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
&-active {
|
&-active {
|
||||||
transition: height @animation-duration-base @ease-in-out,
|
transition: height @animation-duration-base @ease-in-out,
|
||||||
opacity @animation-duration-base @ease-in-out !important;
|
opacity @animation-duration-base @ease-in-out !important;
|
||||||
|
|||||||
@ -17,6 +17,7 @@
|
|||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
@ -26,6 +27,7 @@
|
|||||||
0% {
|
0% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -22,6 +22,7 @@
|
|||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(0%);
|
transform: translateY(0%);
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
@ -35,6 +36,7 @@
|
|||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(100%);
|
transform: translateY(100%);
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
@ -48,6 +50,7 @@
|
|||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(0%);
|
transform: translateX(0%);
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
@ -61,6 +64,7 @@
|
|||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
@ -74,6 +78,7 @@
|
|||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(0%);
|
transform: translateX(0%);
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
@ -87,6 +92,7 @@
|
|||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(100%);
|
transform: translateX(100%);
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
@ -100,6 +106,7 @@
|
|||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(0%);
|
transform: translateY(0%);
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
@ -113,6 +120,7 @@
|
|||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(-100%);
|
transform: translateY(-100%);
|
||||||
transform-origin: 0 0;
|
transform-origin: 0 0;
|
||||||
|
|||||||
@ -22,6 +22,7 @@
|
|||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
@ -35,6 +36,7 @@
|
|||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scaleY(0.8);
|
transform: scaleY(0.8);
|
||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
@ -48,6 +50,7 @@
|
|||||||
transform-origin: 100% 100%;
|
transform-origin: 100% 100%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scaleY(1);
|
transform: scaleY(1);
|
||||||
transform-origin: 100% 100%;
|
transform-origin: 100% 100%;
|
||||||
@ -61,6 +64,7 @@
|
|||||||
transform-origin: 100% 100%;
|
transform-origin: 100% 100%;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scaleY(0.8);
|
transform: scaleY(0.8);
|
||||||
transform-origin: 100% 100%;
|
transform-origin: 100% 100%;
|
||||||
@ -74,6 +78,7 @@
|
|||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scaleX(1);
|
transform: scaleX(1);
|
||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
@ -87,6 +92,7 @@
|
|||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scaleX(0.8);
|
transform: scaleX(0.8);
|
||||||
transform-origin: 0% 0%;
|
transform-origin: 0% 0%;
|
||||||
@ -100,6 +106,7 @@
|
|||||||
transform-origin: 100% 0%;
|
transform-origin: 100% 0%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scaleX(1);
|
transform: scaleX(1);
|
||||||
transform-origin: 100% 0%;
|
transform-origin: 100% 0%;
|
||||||
@ -113,6 +120,7 @@
|
|||||||
transform-origin: 100% 0%;
|
transform-origin: 100% 0%;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scaleX(0.8);
|
transform: scaleX(0.8);
|
||||||
transform-origin: 100% 0%;
|
transform-origin: 100% 0%;
|
||||||
|
|||||||
@ -33,6 +33,7 @@
|
|||||||
transform: scale(0.2);
|
transform: scale(0.2);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -43,6 +44,7 @@
|
|||||||
0% {
|
0% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(0.2);
|
transform: scale(0.2);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -54,6 +56,7 @@
|
|||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@ -64,6 +67,7 @@
|
|||||||
0% {
|
0% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@ -76,6 +80,7 @@
|
|||||||
transform-origin: 50% 0%;
|
transform-origin: 50% 0%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transform-origin: 50% 0%;
|
transform-origin: 50% 0%;
|
||||||
@ -87,6 +92,7 @@
|
|||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transform-origin: 50% 0%;
|
transform-origin: 50% 0%;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
transform-origin: 50% 0%;
|
transform-origin: 50% 0%;
|
||||||
@ -100,6 +106,7 @@
|
|||||||
transform-origin: 0% 50%;
|
transform-origin: 0% 50%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transform-origin: 0% 50%;
|
transform-origin: 0% 50%;
|
||||||
@ -111,6 +118,7 @@
|
|||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transform-origin: 0% 50%;
|
transform-origin: 0% 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
transform-origin: 0% 50%;
|
transform-origin: 0% 50%;
|
||||||
@ -124,6 +132,7 @@
|
|||||||
transform-origin: 100% 50%;
|
transform-origin: 100% 50%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transform-origin: 100% 50%;
|
transform-origin: 100% 50%;
|
||||||
@ -135,6 +144,7 @@
|
|||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transform-origin: 100% 50%;
|
transform-origin: 100% 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
transform-origin: 100% 50%;
|
transform-origin: 100% 50%;
|
||||||
@ -148,6 +158,7 @@
|
|||||||
transform-origin: 50% 100%;
|
transform-origin: 50% 100%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transform-origin: 50% 100%;
|
transform-origin: 50% 100%;
|
||||||
@ -159,6 +170,7 @@
|
|||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
transform-origin: 50% 100%;
|
transform-origin: 50% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(0.8);
|
transform: scale(0.8);
|
||||||
transform-origin: 50% 100%;
|
transform-origin: 50% 100%;
|
||||||
|
|||||||
@ -6,6 +6,7 @@
|
|||||||
display: table;
|
display: table;
|
||||||
content: '';
|
content: '';
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
// https://github.com/ant-design/ant-design/issues/21864
|
// https://github.com/ant-design/ant-design/issues/21864
|
||||||
display: table;
|
display: table;
|
||||||
|
|||||||
@ -64,6 +64,7 @@
|
|||||||
.@{table-prefix-cls}-row-expand-icon {
|
.@{table-prefix-cls}-row-expand-icon {
|
||||||
border: @popover-border;
|
border: @popover-border;
|
||||||
}
|
}
|
||||||
|
|
||||||
tfoot {
|
tfoot {
|
||||||
> tr {
|
> tr {
|
||||||
> th,
|
> th,
|
||||||
@ -72,6 +73,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
> tr {
|
> tr {
|
||||||
> th {
|
> th {
|
||||||
@ -80,6 +82,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
tbody {
|
tbody {
|
||||||
> tr {
|
> tr {
|
||||||
> td {
|
> td {
|
||||||
|
|||||||
@ -45,6 +45,7 @@
|
|||||||
&-disabled {
|
&-disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: @switch-disabled-opacity;
|
opacity: @switch-disabled-opacity;
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
|||||||
@ -1,5 +1,4 @@
|
|||||||
@import './size';
|
@import './size';
|
||||||
|
|
||||||
@import (reference) '../../style/themes/index';
|
@import (reference) '../../style/themes/index';
|
||||||
@table-prefix-cls: ~'@{ant-prefix}-table';
|
@table-prefix-cls: ~'@{ant-prefix}-table';
|
||||||
|
|
||||||
|
|||||||
@ -539,6 +539,7 @@
|
|||||||
&-collapsed::before {
|
&-collapsed::before {
|
||||||
transform: rotate(-180deg);
|
transform: rotate(-180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-collapsed::after {
|
&-collapsed::after {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
@ -593,6 +594,7 @@
|
|||||||
.@{table-prefix-cls}-empty & {
|
.@{table-prefix-cls}-empty & {
|
||||||
color: @disabled-color;
|
color: @disabled-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
> td {
|
> td {
|
||||||
background: @component-background;
|
background: @component-background;
|
||||||
@ -651,6 +653,7 @@
|
|||||||
&::before {
|
&::before {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
@ -689,6 +692,7 @@
|
|||||||
box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
|
box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-sticky {
|
&-sticky {
|
||||||
&-holder {
|
&-holder {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
@ -705,16 +709,20 @@
|
|||||||
background: lighten(@table-border-color, 80%);
|
background: lighten(@table-border-color, 80%);
|
||||||
border-top: 1px solid @table-border-color;
|
border-top: 1px solid @table-border-color;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform-origin: center bottom;
|
transform-origin: center bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-bar {
|
&-bar {
|
||||||
height: 8px;
|
height: 8px;
|
||||||
background-color: @table-sticky-scroll-bar-bg;
|
background-color: @table-sticky-scroll-bar-bg;
|
||||||
border-radius: @table-sticky-scroll-bar-radius;
|
border-radius: @table-sticky-scroll-bar-radius;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: @table-sticky-scroll-bar-active-bg;
|
background-color: @table-sticky-scroll-bar-active-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-active {
|
&-active {
|
||||||
background-color: @table-sticky-scroll-bar-active-bg;
|
background-color: @table-sticky-scroll-bar-active-bg;
|
||||||
}
|
}
|
||||||
@ -730,6 +738,7 @@
|
|||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-ping-right {
|
&-ping-right {
|
||||||
.@{table-prefix-cls}-cell-fix-right-first::after {
|
.@{table-prefix-cls}-cell-fix-right-first::after {
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
|||||||
@ -40,6 +40,7 @@
|
|||||||
left: 0;
|
left: 0;
|
||||||
box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
|
box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
right: 0;
|
right: 0;
|
||||||
box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
|
box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
|
||||||
@ -123,6 +124,7 @@
|
|||||||
top: 0;
|
top: 0;
|
||||||
box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
|
box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
|
box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
|
||||||
|
|||||||
@ -77,6 +77,7 @@
|
|||||||
&-rtl {
|
&-rtl {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-menu-item {
|
&-menu-item {
|
||||||
.@{tab-prefix-cls}-dropdown-rtl & {
|
.@{tab-prefix-cls}-dropdown-rtl & {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|||||||
@ -58,16 +58,20 @@
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-color: transparent;
|
border-color: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:not(&-checked):hover {
|
&:not(&-checked):hover {
|
||||||
color: @primary-color;
|
color: @primary-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active,
|
&:active,
|
||||||
&-checked {
|
&-checked {
|
||||||
color: @text-color-inverse;
|
color: @text-color-inverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-checked {
|
&-checked {
|
||||||
background-color: @primary-6;
|
background-color: @primary-6;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
background-color: @primary-7;
|
background-color: @primary-7;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -15,6 +15,7 @@
|
|||||||
padding-right: @control-padding-horizontal-sm;
|
padding-right: @control-padding-horizontal-sm;
|
||||||
padding-left: 24px;
|
padding-left: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-action {
|
&-action {
|
||||||
.@{transfer-prefix-cls}-rtl & {
|
.@{transfer-prefix-cls}-rtl & {
|
||||||
right: auto;
|
right: auto;
|
||||||
@ -35,6 +36,7 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
.@{transfer-prefix-cls}-rtl & {
|
.@{transfer-prefix-cls}-rtl & {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|||||||
@ -12,6 +12,7 @@
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
transition: transform 0.3s;
|
transition: transform 0.3s;
|
||||||
}
|
}
|
||||||
@ -27,6 +28,7 @@
|
|||||||
background-color: @primary-color;
|
background-color: @primary-color;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -3px;
|
top: -3px;
|
||||||
@ -187,6 +189,7 @@
|
|||||||
border-right: 1px solid @normal-color;
|
border-right: 1px solid @normal-color;
|
||||||
content: ' ';
|
content: ' ';
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: @tree-title-height - 14px;
|
width: @tree-title-height - 14px;
|
||||||
@ -233,6 +236,7 @@
|
|||||||
line-height: @tree-title-height;
|
line-height: @tree-title-height;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
||||||
&:empty {
|
&:empty {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -310,6 +314,7 @@
|
|||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -316,10 +316,14 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
|
|||||||
const { ellipsisText, isEllipsis, expanded } = this.state;
|
const { ellipsisText, isEllipsis, expanded } = this.state;
|
||||||
const { rows, suffix, onEllipsis } = this.getEllipsis();
|
const { rows, suffix, onEllipsis } = this.getEllipsis();
|
||||||
const { children } = this.props;
|
const { children } = this.props;
|
||||||
if (!rows || rows < 0 || !this.contentRef.current || expanded) return;
|
if (!rows || rows < 0 || !this.contentRef.current || expanded) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// Do not measure if css already support ellipsis
|
// Do not measure if css already support ellipsis
|
||||||
if (this.canUseCSSEllipsis()) return;
|
if (this.canUseCSSEllipsis()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
devWarning(
|
devWarning(
|
||||||
toArray(children).every((child: React.ReactNode) => typeof child === 'string'),
|
toArray(children).every((child: React.ReactNode) => typeof child === 'string'),
|
||||||
|
|||||||
@ -22,6 +22,7 @@
|
|||||||
|
|
||||||
&&-danger {
|
&&-danger {
|
||||||
color: @error-color;
|
color: @error-color;
|
||||||
|
|
||||||
a&:active,
|
a&:active,
|
||||||
a&:focus,
|
a&:focus,
|
||||||
a&:hover {
|
a&:hover {
|
||||||
@ -45,18 +46,22 @@
|
|||||||
h1 {
|
h1 {
|
||||||
.typography-title-1();
|
.typography-title-1();
|
||||||
}
|
}
|
||||||
|
|
||||||
h2&,
|
h2&,
|
||||||
h2 {
|
h2 {
|
||||||
.typography-title-2();
|
.typography-title-2();
|
||||||
}
|
}
|
||||||
|
|
||||||
h3&,
|
h3&,
|
||||||
h3 {
|
h3 {
|
||||||
.typography-title-3();
|
.typography-title-3();
|
||||||
}
|
}
|
||||||
|
|
||||||
h4&,
|
h4&,
|
||||||
h4 {
|
h4 {
|
||||||
.typography-title-4();
|
.typography-title-4();
|
||||||
}
|
}
|
||||||
|
|
||||||
h5&,
|
h5&,
|
||||||
h5 {
|
h5 {
|
||||||
.typography-title-5();
|
.typography-title-5();
|
||||||
|
|||||||
@ -106,8 +106,9 @@ export default (
|
|||||||
// Get origin style
|
// Get origin style
|
||||||
const originStyle = window.getComputedStyle(originElement);
|
const originStyle = window.getComputedStyle(originElement);
|
||||||
const lineHeight = getRealLineHeight(originElement);
|
const lineHeight = getRealLineHeight(originElement);
|
||||||
const maxHeight =
|
const overflowRows = rows + 1;
|
||||||
Math.floor(lineHeight) * (rows + 1) +
|
const oneRowMaxHeight =
|
||||||
|
Math.floor(lineHeight) +
|
||||||
pxToNumber(originStyle.paddingTop) +
|
pxToNumber(originStyle.paddingTop) +
|
||||||
pxToNumber(originStyle.paddingBottom);
|
pxToNumber(originStyle.paddingBottom);
|
||||||
|
|
||||||
@ -128,7 +129,9 @@ export default (
|
|||||||
|
|
||||||
// Check if ellipsis in measure div is height enough for content
|
// Check if ellipsis in measure div is height enough for content
|
||||||
function inRange() {
|
function inRange() {
|
||||||
return Math.ceil(ellipsisContainer.getBoundingClientRect().height) < maxHeight;
|
return (
|
||||||
|
Math.ceil(ellipsisContainer.getBoundingClientRect().height / overflowRows) < oneRowMaxHeight
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Skip ellipsis if already match
|
// Skip ellipsis if already match
|
||||||
@ -223,6 +226,7 @@ export default (
|
|||||||
reactNode: null,
|
reactNode: null,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
if (type === TEXT_NODE) {
|
if (type === TEXT_NODE) {
|
||||||
const fullText = childNode.textContent || '';
|
const fullText = childNode.textContent || '';
|
||||||
const textNode = document.createTextNode(fullText);
|
const textNode = document.createTextNode(fullText);
|
||||||
|
|||||||
@ -121,6 +121,7 @@
|
|||||||
color: @disabled-color;
|
color: @disabled-color;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @text-color-secondary;
|
color: @text-color-secondary;
|
||||||
}
|
}
|
||||||
@ -149,6 +150,7 @@
|
|||||||
height: @line-height-base * @font-size-base;
|
height: @line-height-base * @font-size-base;
|
||||||
margin-top: @margin-xs;
|
margin-top: @margin-xs;
|
||||||
font-size: @font-size-base;
|
font-size: @font-size-base;
|
||||||
|
|
||||||
&-name {
|
&-name {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -246,6 +248,7 @@
|
|||||||
.@{iconfont-css-prefix} {
|
.@{iconfont-css-prefix} {
|
||||||
color: @error-color;
|
color: @error-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-btn {
|
&-btn {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -21,6 +21,7 @@
|
|||||||
&-rtl {
|
&-rtl {
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-item-list-type-text {
|
&-item-list-type-text {
|
||||||
&:hover {
|
&:hover {
|
||||||
.@{upload-prefix-cls}-list-item-name-icon-count-1 {
|
.@{upload-prefix-cls}-list-item-name-icon-count-1 {
|
||||||
@ -37,6 +38,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-item {
|
&-item {
|
||||||
&-name {
|
&-name {
|
||||||
.@{upload-prefix-cls}-list-rtl & {
|
.@{upload-prefix-cls}-list-rtl & {
|
||||||
|
|||||||
@ -26,7 +26,7 @@ title: Third-Party Libraries
|
|||||||
| i18n | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
|
| i18n | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
|
||||||
| Code highlight | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
|
| Code highlight | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
|
||||||
| Markdown renderer | [react-markdown](https://remarkjs.github.io/react-markdown/) |
|
| Markdown renderer | [react-markdown](https://remarkjs.github.io/react-markdown/) |
|
||||||
| Infinite Scroll | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [antd-table-infinity](https://github.com/Leonard-Li777/antd-table-infinity) |
|
| Infinite Scroll | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
|
||||||
| Map | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap](https://github.com/ElemeFE/react-amap) |
|
| Map | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap](https://github.com/ElemeFE/react-amap) |
|
||||||
| Video | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
|
| Video | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
|
||||||
| Context Menu | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |
|
| Context Menu | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |
|
||||||
|
|||||||
@ -26,7 +26,7 @@ title: 社区精选组件
|
|||||||
| 应用国际化 | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
|
| 应用国际化 | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
|
||||||
| 代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
|
| 代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
|
||||||
| Markdown 渲染 | [react-markdown](https://remarkjs.github.io/react-markdown/) |
|
| Markdown 渲染 | [react-markdown](https://remarkjs.github.io/react-markdown/) |
|
||||||
| 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [antd-table-infinity](https://github.com/Leonard-Li777/antd-table-infinity) |
|
| 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
|
||||||
| 地图 | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap 高德](https://github.com/ElemeFE/react-amap) |
|
| 地图 | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap 高德](https://github.com/ElemeFE/react-amap) |
|
||||||
| 视频播放 | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
|
| 视频播放 | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
|
||||||
| 右键菜单 | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |
|
| 右键菜单 | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user