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
|
||||
|
||||
`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
|
||||
|
||||
`2021-09-30`
|
||||
|
||||
@ -89,6 +89,7 @@ describe('Alert', () => {
|
||||
|
||||
it('ErrorBoundary', () => {
|
||||
jest.spyOn(console, 'error').mockImplementation(() => undefined);
|
||||
// eslint-disable-next-line no-console
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line react/jsx-no-undef
|
||||
|
||||
@ -84,6 +84,7 @@
|
||||
.@{iconfont-css-prefix}-close {
|
||||
color: @alert-close-color;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @alert-close-hover-color;
|
||||
}
|
||||
@ -93,6 +94,7 @@
|
||||
&-close-text {
|
||||
color: @alert-close-color;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @alert-close-hover-color;
|
||||
}
|
||||
@ -111,6 +113,7 @@
|
||||
margin-right: @alert-with-description-padding-vertical;
|
||||
font-size: @alert-with-description-icon-size;
|
||||
}
|
||||
|
||||
&-with-description &-message {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -30,6 +31,7 @@
|
||||
background-color: @anchor-border-color;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&-ball {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
@ -41,6 +43,7 @@
|
||||
border-radius: 8px;
|
||||
transform: translateX(-50%);
|
||||
transition: top 0.3s ease-in-out;
|
||||
|
||||
&.visible {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
background: @badge-color;
|
||||
border-radius: (@badge-height / 2);
|
||||
box-shadow: 0 0 0 1px @shadow-color-inverse;
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
color: @badge-text-color;
|
||||
@ -86,12 +87,15 @@
|
||||
vertical-align: middle;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&-success {
|
||||
background-color: @success-color;
|
||||
}
|
||||
|
||||
&-processing {
|
||||
position: relative;
|
||||
background-color: @processing-color;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -104,12 +108,15 @@
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-default {
|
||||
background-color: @normal-color;
|
||||
}
|
||||
|
||||
&-error {
|
||||
background-color: @error-color;
|
||||
}
|
||||
|
||||
&-warning {
|
||||
background-color: @warning-color;
|
||||
}
|
||||
@ -177,6 +184,7 @@
|
||||
transform: scale(0.8);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(2.4);
|
||||
opacity: 0;
|
||||
@ -192,6 +200,7 @@
|
||||
.@{number-prefix-cls} {
|
||||
overflow: hidden;
|
||||
direction: ltr;
|
||||
|
||||
&-only {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -216,6 +225,7 @@
|
||||
transform: scale(0) translate(50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) translate(50%, -50%);
|
||||
}
|
||||
@ -225,6 +235,7 @@
|
||||
0% {
|
||||
transform: scale(1) translate(50%, -50%);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0) translate(50%, -50%);
|
||||
opacity: 0;
|
||||
@ -236,6 +247,7 @@
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
@ -245,6 +257,7 @@
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
|
||||
@ -43,6 +43,7 @@
|
||||
right: unset;
|
||||
left: 0;
|
||||
border-color: currentColor currentColor transparent transparent;
|
||||
|
||||
&::after {
|
||||
border-color: currentColor currentColor transparent transparent;
|
||||
}
|
||||
@ -57,6 +58,7 @@
|
||||
right: 0;
|
||||
left: unset;
|
||||
border-color: currentColor transparent transparent currentColor;
|
||||
|
||||
&::after {
|
||||
border-color: currentColor transparent transparent currentColor;
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
a {
|
||||
color: @breadcrumb-link-color;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @breadcrumb-link-color-hover;
|
||||
}
|
||||
@ -23,6 +24,7 @@
|
||||
|
||||
& > span:last-child {
|
||||
color: @breadcrumb-last-item-color;
|
||||
|
||||
a {
|
||||
color: @breadcrumb-last-item-color;
|
||||
}
|
||||
|
||||
@ -281,6 +281,7 @@ a.@{btn-prefix-cls} {
|
||||
&-lg {
|
||||
line-height: @btn-height-lg - 2px;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
line-height: @btn-height-sm - 2px;
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
// http://stackoverflow.com/a/17253457
|
||||
> a:only-child {
|
||||
color: currentColor;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -106,6 +107,7 @@
|
||||
.button-color(@primary-color-hover; @background; @primary-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
& when (@theme = dark) {
|
||||
.button-color(@primary-7; @background; @primary-7);
|
||||
@ -126,6 +128,7 @@
|
||||
.button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) {
|
||||
.button-color(@color; null; @border);
|
||||
text-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
& when (@border = transparent) {
|
||||
@ -155,6 +158,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
& when (@border = transparent) {
|
||||
& when (@theme = dark) {
|
||||
@ -192,11 +196,13 @@
|
||||
> .@{btnClassName},
|
||||
> span > .@{btnClassName} {
|
||||
position: relative;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
z-index: 0;
|
||||
}
|
||||
@ -248,29 +254,36 @@
|
||||
> .@{iconfont-css-prefix} {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:not([disabled]):hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not([disabled]):active {
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
|
||||
> * {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
.button-size(
|
||||
@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
|
||||
);
|
||||
}
|
||||
|
||||
&-sm {
|
||||
.button-size(
|
||||
@btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
|
||||
@ -284,6 +297,7 @@
|
||||
// default button style
|
||||
.btn-default() {
|
||||
.button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border; );
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@ -307,6 +321,7 @@
|
||||
// danger default button style
|
||||
.btn-danger-default() {
|
||||
.button-color(@error-color, @btn-default-bg, @error-color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
& when (@theme = dark) {
|
||||
@ -325,6 +340,7 @@
|
||||
.button-color(@error-color-hover, @btn-default-bg, @error-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
& when (@theme = dark) {
|
||||
.button-color(
|
||||
@ -348,6 +364,7 @@
|
||||
.btn-danger-link() {
|
||||
.button-variant-other(@error-color, transparent, transparent);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
& when (@theme = dark) {
|
||||
@ -360,6 +377,7 @@
|
||||
.button-color(@error-color-hover; transparent; transparent);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
& when (@theme = dark) {
|
||||
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
|
||||
@ -377,9 +395,11 @@
|
||||
.btn-link() {
|
||||
.button-variant-other(@link-color, transparent, transparent);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
background: @btn-link-hover-bg;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@ -391,6 +411,7 @@
|
||||
.btn-text() {
|
||||
.button-variant-other(@text-color, transparent, transparent);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @text-color;
|
||||
@ -409,6 +430,7 @@
|
||||
.btn-danger-text() {
|
||||
.button-variant-other(@error-color, transparent, transparent);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
& when (@theme = dark) {
|
||||
@ -453,12 +475,14 @@
|
||||
.btn-square(@btnClassName: btn) {
|
||||
.square(@btn-square-size);
|
||||
.button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
|
||||
|
||||
& > * {
|
||||
font-size: @btn-square-only-icon-size;
|
||||
}
|
||||
&.@{btnClassName}-lg {
|
||||
.square(@btn-square-size-lg);
|
||||
.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;
|
||||
}
|
||||
@ -466,6 +490,7 @@
|
||||
&.@{btnClassName}-sm {
|
||||
.square(@btn-square-size-sm);
|
||||
.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;
|
||||
}
|
||||
@ -526,6 +551,7 @@
|
||||
border-top-right-radius: @btn-border-radius-base;
|
||||
border-bottom-right-radius: @btn-border-radius-base;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
> .@{btnClassName}:only-child {
|
||||
border-radius: @btn-border-radius-sm;
|
||||
@ -544,12 +570,14 @@
|
||||
border-bottom-right-radius: @btn-border-radius-sm;
|
||||
}
|
||||
}
|
||||
|
||||
& > & {
|
||||
float: left;
|
||||
}
|
||||
& > &:not(:first-child):not(:last-child) > .@{btnClassName} {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
& > &:first-child:not(:last-child) {
|
||||
> .@{btnClassName}:last-child {
|
||||
padding-right: 8px;
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
border-right-color: @btn-group-border;
|
||||
border-left-color: @btn-default-border;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
.@{btn-prefix-cls}-group-rtl& {
|
||||
border-right-color: @btn-default-border;
|
||||
|
||||
@ -250,6 +250,7 @@
|
||||
|
||||
&-detail {
|
||||
overflow: hidden;
|
||||
|
||||
> div:not(:last-child) {
|
||||
margin-bottom: @margin-xs;
|
||||
}
|
||||
@ -298,6 +299,7 @@
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
@ -116,6 +116,7 @@
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
@ -137,15 +138,18 @@
|
||||
border: 0;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.slick-disabled::before {
|
||||
opacity: 0.25;
|
||||
}
|
||||
@ -161,6 +165,7 @@
|
||||
|
||||
.slick-next {
|
||||
right: -25px;
|
||||
|
||||
&::before {
|
||||
content: '→';
|
||||
}
|
||||
@ -183,10 +188,12 @@
|
||||
&-bottom {
|
||||
bottom: 12px;
|
||||
}
|
||||
|
||||
&-top {
|
||||
top: 12px;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -202,6 +209,7 @@
|
||||
text-indent: -999px;
|
||||
vertical-align: top;
|
||||
transition: all 0.5s;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -216,17 +224,21 @@
|
||||
cursor: pointer;
|
||||
opacity: 0.3;
|
||||
transition: all 0.5s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
&.slick-active {
|
||||
width: @carousel-dot-active-width;
|
||||
|
||||
& button {
|
||||
background: @component-background;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
@ -250,19 +262,23 @@
|
||||
right: auto;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
&-right {
|
||||
right: 12px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
width: @carousel-dot-height;
|
||||
height: @carousel-dot-width;
|
||||
margin: 4px 2px;
|
||||
vertical-align: baseline;
|
||||
|
||||
button {
|
||||
width: @carousel-dot-height;
|
||||
height: @carousel-dot-width;
|
||||
}
|
||||
|
||||
&.slick-active {
|
||||
width: @carousel-dot-height;
|
||||
height: @carousel-dot-active-width;
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
.@{carousel-prefix-cls}-rtl & {
|
||||
right: -25px;
|
||||
left: auto;
|
||||
|
||||
&::before {
|
||||
content: '→';
|
||||
}
|
||||
@ -29,6 +30,7 @@
|
||||
.@{carousel-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: -25px;
|
||||
|
||||
&::before {
|
||||
content: '←';
|
||||
}
|
||||
|
||||
@ -327,14 +327,15 @@ describe('Cascader', () => {
|
||||
});
|
||||
|
||||
// FIXME: Move to `rc-tree-select` instead
|
||||
// it('should warning if not find `value` in `options`', () => {
|
||||
// const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
// mount(<Cascader options={[{ label: 'a', value: 'a', children: [{ label: 'b' }] }]} />);
|
||||
// expect(errorSpy).toHaveBeenCalledWith(
|
||||
// 'Warning: [antd: Cascader] Not found `value` in `options`.',
|
||||
// );
|
||||
// errorSpy.mockRestore();
|
||||
// });
|
||||
// eslint-disable-next-line jest/no-disabled-tests
|
||||
it.skip('should warning if not find `value` in `options`', () => {
|
||||
const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
mount(<Cascader options={[{ label: 'a', value: 'a', children: [{ label: 'b' }] }]} />);
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: Cascader] Not found `value` in `options`.',
|
||||
);
|
||||
errorSpy.mockRestore();
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/17690
|
||||
it('should not breaks when children is null', () => {
|
||||
|
||||
@ -59,6 +59,7 @@
|
||||
&-disabled {
|
||||
color: @disabled-color;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@ -2,4 +2,5 @@
|
||||
@import './mixin';
|
||||
|
||||
.antCheckboxFn();
|
||||
|
||||
@import './rtl';
|
||||
|
||||
@ -127,6 +127,7 @@
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @border-color-base !important;
|
||||
|
||||
&::after {
|
||||
border-color: @input-disabled-bg;
|
||||
border-collapse: separate;
|
||||
@ -180,10 +181,12 @@
|
||||
|
||||
&-item {
|
||||
margin-right: @checkbox-group-item-margin-right;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-item + &-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -222,6 +225,7 @@
|
||||
transform: scale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.6);
|
||||
opacity: 0;
|
||||
|
||||
@ -11,12 +11,14 @@
|
||||
margin-right: 0;
|
||||
margin-left: @checkbox-group-item-margin-right;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.@{checkbox-prefix-cls}-group-rtl & {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item + &-item {
|
||||
.@{checkbox-prefix-cls}-group-rtl & {
|
||||
margin-left: @checkbox-group-item-margin-right;
|
||||
|
||||
@ -38,6 +38,7 @@
|
||||
justify-content: flex-start;
|
||||
margin-bottom: @margin-xss;
|
||||
font-size: @comment-font-size-base;
|
||||
|
||||
& > a,
|
||||
& > span {
|
||||
padding-right: @padding-xs;
|
||||
@ -49,8 +50,10 @@
|
||||
color: @comment-author-name-color;
|
||||
font-size: @comment-font-size-base;
|
||||
transition: color 0.3s;
|
||||
|
||||
> * {
|
||||
color: @comment-author-name-color;
|
||||
|
||||
&:hover {
|
||||
color: @comment-author-name-color;
|
||||
}
|
||||
@ -78,6 +81,7 @@
|
||||
> li {
|
||||
display: inline-block;
|
||||
color: @comment-action-color;
|
||||
|
||||
> span {
|
||||
margin-right: 10px;
|
||||
color: @comment-action-color;
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
> li {
|
||||
> span {
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
|
||||
@ -60,7 +60,6 @@ jest.mock('rc-util/lib/Portal');
|
||||
describe('ConfigProvider', () => {
|
||||
describe('components', () => {
|
||||
function testPair(name, renderComponent) {
|
||||
// eslint-disable-next-line jest/valid-describe
|
||||
describe(`${name}`, () => {
|
||||
// normal
|
||||
it('normal', () => {
|
||||
|
||||
@ -280,6 +280,7 @@
|
||||
&-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
|
||||
// range end border-radius
|
||||
&-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
@ -298,12 +299,14 @@
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-date-panel
|
||||
&-in-view&-in-range&-range-hover-start
|
||||
.@{cellClassName}::after {
|
||||
right: -5px - @border-width-base;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
|
||||
right: 0;
|
||||
left: -5px - @border-width-base;
|
||||
@ -313,6 +316,7 @@
|
||||
&-range-hover&-range-start::after {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
&-range-hover&-range-end::after {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
@ -42,6 +43,7 @@
|
||||
> td {
|
||||
padding-bottom: @descriptions-item-padding-bottom;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
@ -126,6 +128,7 @@
|
||||
&-bordered {
|
||||
.@{descriptions-prefix-cls}-view {
|
||||
border: 1px solid @border-color-split;
|
||||
|
||||
> table {
|
||||
table-layout: auto;
|
||||
border-collapse: collapse;
|
||||
@ -144,6 +147,7 @@
|
||||
|
||||
.@{descriptions-prefix-cls}-item-label {
|
||||
background-color: @descriptions-bg;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
@ -151,6 +155,7 @@
|
||||
|
||||
.@{descriptions-prefix-cls}-row {
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@ -57,6 +57,7 @@
|
||||
top: 50%;
|
||||
width: @divider-orientation-margin;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 50%;
|
||||
width: 100% - @divider-orientation-margin;
|
||||
@ -68,6 +69,7 @@
|
||||
top: 50%;
|
||||
width: 100% - @divider-orientation-margin;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 50%;
|
||||
width: @divider-orientation-margin;
|
||||
@ -88,6 +90,7 @@
|
||||
|
||||
&-horizontal&-with-text&-dashed {
|
||||
border-top: 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-style: dashed none none;
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
width: 100% - @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: @divider-orientation-margin;
|
||||
@ -27,6 +28,7 @@
|
||||
width: @divider-orientation-margin;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
.@{divider-prefix-cls}-rtl& {
|
||||
width: 100% - @divider-orientation-margin;
|
||||
|
||||
@ -112,6 +112,7 @@
|
||||
.@{drawer-prefix-cls}-content-wrapper {
|
||||
box-shadow: @shadow-1-up;
|
||||
}
|
||||
|
||||
&.no-mask {
|
||||
bottom: 1px;
|
||||
transform: translateY(1px);
|
||||
@ -245,6 +246,7 @@
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -86,13 +86,16 @@
|
||||
border-left-color: transparent;
|
||||
box-shadow: 3px 3px 7px fade(@black, 7%);
|
||||
}
|
||||
|
||||
&-placement-topCenter > &-arrow {
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
&-placement-topLeft > &-arrow {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
&-placement-topRight > &-arrow {
|
||||
right: 16px;
|
||||
}
|
||||
@ -107,13 +110,16 @@
|
||||
border-left-color: @popover-bg;
|
||||
box-shadow: -2px -2px 5px fade(@black, 6%);
|
||||
}
|
||||
|
||||
&-placement-bottomCenter > &-arrow {
|
||||
left: 50%;
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
&-placement-bottomLeft > &-arrow {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
&-placement-bottomRight > &-arrow {
|
||||
right: 16px;
|
||||
}
|
||||
@ -362,6 +368,7 @@
|
||||
.@{dropdown-prefix-cls}-menu-submenu-arrow::after {
|
||||
color: @text-color-secondary-dark;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @text-color-inverse;
|
||||
background: transparent;
|
||||
|
||||
@ -55,23 +55,29 @@
|
||||
fill: @white;
|
||||
fill-opacity: 0.08;
|
||||
}
|
||||
|
||||
&-path {
|
||||
&-1 {
|
||||
fill: #262626;
|
||||
}
|
||||
|
||||
&-2 {
|
||||
fill: url(#linearGradient-1);
|
||||
}
|
||||
|
||||
&-3 {
|
||||
fill: #595959;
|
||||
}
|
||||
|
||||
&-4 {
|
||||
fill: #434343;
|
||||
}
|
||||
|
||||
&-5 {
|
||||
fill: #595959;
|
||||
}
|
||||
}
|
||||
|
||||
&-g {
|
||||
fill: #434343;
|
||||
}
|
||||
@ -81,23 +87,29 @@
|
||||
fill: #f5f5f5;
|
||||
fill-opacity: 0.8;
|
||||
}
|
||||
|
||||
&-path {
|
||||
&-1 {
|
||||
fill: #aeb8c2;
|
||||
}
|
||||
|
||||
&-2 {
|
||||
fill: url(#linearGradient-1);
|
||||
}
|
||||
|
||||
&-3 {
|
||||
fill: #f5f5f7;
|
||||
}
|
||||
|
||||
&-4 {
|
||||
fill: #dce0e6;
|
||||
}
|
||||
|
||||
&-5 {
|
||||
fill: #dce0e6;
|
||||
}
|
||||
}
|
||||
|
||||
&-g {
|
||||
fill: @white;
|
||||
}
|
||||
@ -111,9 +123,11 @@
|
||||
fill: @white;
|
||||
fill-opacity: 0.08;
|
||||
}
|
||||
|
||||
&-g {
|
||||
stroke: #434343;
|
||||
}
|
||||
|
||||
&-path {
|
||||
fill: #262626;
|
||||
stroke: #434343;
|
||||
@ -123,9 +137,11 @@
|
||||
&-ellipse {
|
||||
fill: #f5f5f5;
|
||||
}
|
||||
|
||||
&-g {
|
||||
stroke: #d9d9d9;
|
||||
}
|
||||
|
||||
&-path {
|
||||
fill: #fafafa;
|
||||
}
|
||||
|
||||
@ -54,6 +54,7 @@
|
||||
+ .@{form-prefix-cls}-text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&-handler-wrap {
|
||||
z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
|
||||
}
|
||||
|
||||
@ -39,6 +39,7 @@
|
||||
&-small {
|
||||
.formSize(@input-height-sm);
|
||||
}
|
||||
|
||||
&-large {
|
||||
.formSize(@input-height-lg);
|
||||
}
|
||||
@ -263,6 +264,7 @@
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
@ -274,6 +276,7 @@
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
@ -285,6 +288,7 @@
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
|
||||
@ -32,6 +32,7 @@
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
.@{form-prefix-cls}-rtl & {
|
||||
margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right;
|
||||
@ -130,6 +131,7 @@
|
||||
margin-left: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
&-clear {
|
||||
.@{form-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
|
||||
@ -75,6 +75,7 @@
|
||||
&-arrow {
|
||||
margin-right: 19px;
|
||||
}
|
||||
|
||||
&-clear {
|
||||
right: 32px;
|
||||
}
|
||||
@ -154,10 +155,12 @@
|
||||
.@{ant-prefix}-picker {
|
||||
background-color: @form-warning-input-bg;
|
||||
border-color: @warning-color;
|
||||
|
||||
&-focused,
|
||||
&:focus {
|
||||
.active(@warning-color, @warning-color-hover, @warning-color-outline);
|
||||
}
|
||||
|
||||
&:not([disabled]):hover {
|
||||
background-color: @form-warning-input-bg;
|
||||
border-color: @warning-color;
|
||||
@ -214,10 +217,12 @@
|
||||
.@{ant-prefix}-picker {
|
||||
background-color: @form-error-input-bg;
|
||||
border-color: @error-color;
|
||||
|
||||
&-focused,
|
||||
&:focus {
|
||||
.active(@error-color, @error-color-hover, @error-color-outline);
|
||||
}
|
||||
|
||||
&:not([disabled]):hover {
|
||||
background-color: @form-error-input-bg;
|
||||
border-color: @error-color;
|
||||
@ -285,6 +290,7 @@
|
||||
// Mentions
|
||||
.@{ant-prefix}-mentions {
|
||||
border-color: @error-color !important;
|
||||
|
||||
&-focused,
|
||||
&:focus {
|
||||
.active(@error-color, @error-color-hover, @error-color-outline);
|
||||
|
||||
@ -7,10 +7,12 @@
|
||||
.@{image-prefix-cls} {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
&-placeholder {
|
||||
background-color: @image-bg;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
|
||||
@ -74,9 +76,11 @@
|
||||
transition: transform 0.3s @ease-out 0s;
|
||||
user-select: none;
|
||||
pointer-events: auto;
|
||||
|
||||
&-wrapper {
|
||||
.box();
|
||||
transition: transform 0.3s @ease-out 0s;
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
@ -90,6 +94,7 @@
|
||||
&-moving {
|
||||
.@{image-prefix-cls}-preview-img {
|
||||
cursor: grabbing;
|
||||
|
||||
&-wrapper {
|
||||
transition-duration: 0s;
|
||||
}
|
||||
@ -119,14 +124,17 @@
|
||||
margin-left: @control-padding-horizontal;
|
||||
padding: @control-padding-horizontal;
|
||||
cursor: pointer;
|
||||
|
||||
&-disabled {
|
||||
color: @image-preview-operation-disabled-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: @image-preview-operation-size;
|
||||
}
|
||||
@ -149,6 +157,7 @@
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
|
||||
&-disabled {
|
||||
color: @image-preview-operation-disabled-color;
|
||||
cursor: not-allowed;
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
&-group {
|
||||
.reset-component();
|
||||
.input-group(~'@{input-number-prefix-cls}');
|
||||
|
||||
&-wrapper {
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
@ -39,9 +40,11 @@
|
||||
text-align: center;
|
||||
border-left: @border-width-base @border-style-base @input-number-handler-border-color;
|
||||
transition: all 0.1s linear;
|
||||
|
||||
&:active {
|
||||
background: @input-number-handler-active-bg;
|
||||
}
|
||||
|
||||
&:hover &-up-inner,
|
||||
&:hover &-down-inner {
|
||||
color: @input-number-handler-hover-bg;
|
||||
@ -171,11 +174,13 @@
|
||||
&-handler-up {
|
||||
border-top-right-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
|
||||
&-inner {
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
height: 60% !important;
|
||||
}
|
||||
@ -186,11 +191,13 @@
|
||||
border-top: @border-width-base @border-style-base @border-color-base;
|
||||
border-bottom-right-radius: @border-radius-base;
|
||||
cursor: pointer;
|
||||
|
||||
&-inner {
|
||||
top: 50%;
|
||||
text-align: center;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
height: 60% !important;
|
||||
}
|
||||
|
||||
@ -135,6 +135,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
|
||||
onChange={handleChange}
|
||||
onCompositionEnd={onInternalCompositionEnd}
|
||||
ref={innerRef}
|
||||
maxLength={maxLength}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
@ -3317,6 +3317,7 @@ exports[`renders ./components/input/demo/textarea-show-count.md correctly 1`] =
|
||||
>
|
||||
<textarea
|
||||
class="ant-input"
|
||||
maxlength="100"
|
||||
/>
|
||||
</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`] = `
|
||||
<textarea
|
||||
class="ant-input"
|
||||
maxlength="10"
|
||||
/>
|
||||
`;
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
@import './mixin';
|
||||
|
||||
@import (reference) '../../style/themes/index';
|
||||
@input-prefix-cls: ~'@{ant-prefix}-input';
|
||||
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
&-group {
|
||||
.reset-component();
|
||||
.input-group(~'@{input-prefix-cls}');
|
||||
|
||||
&-wrapper {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
@ -1021,9 +1021,16 @@ Array [
|
||||
|
||||
exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
|
||||
<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
|
||||
class="infinite-scroll-component "
|
||||
style="height:auto;overflow:auto;-webkit-overflow-scrolling:touch"
|
||||
>
|
||||
<div
|
||||
class="ant-list ant-list-split"
|
||||
>
|
||||
@ -1086,6 +1093,31 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
|
||||
</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>
|
||||
`;
|
||||
|
||||
@ -7,81 +7,61 @@ title:
|
||||
|
||||
## 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
|
||||
|
||||
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
|
||||
import { List, message, Avatar, Spin } from 'antd';
|
||||
import reqwest from 'reqwest';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
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';
|
||||
|
||||
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,
|
||||
});
|
||||
const loadMoreData = () => {
|
||||
if (loading) {
|
||||
return;
|
||||
}
|
||||
this.fetchData(res => {
|
||||
data = data.concat(res.results);
|
||||
this.setState({
|
||||
data,
|
||||
loading: false,
|
||||
});
|
||||
setLoading(true);
|
||||
fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat&noinfo')
|
||||
.then(res => res.json())
|
||||
.then(body => {
|
||||
setData([...data, ...body.results]);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
useEffect(() => {
|
||||
loadMoreData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="demo-infinite-container">
|
||||
<div
|
||||
id="scrollableDiv"
|
||||
style={{
|
||||
height: 400,
|
||||
overflow: 'auto',
|
||||
padding: '0 16px',
|
||||
border: '1px solid rgba(140, 140, 140, 0.35)',
|
||||
}}
|
||||
>
|
||||
<InfiniteScroll
|
||||
initialLoad={false}
|
||||
pageStart={0}
|
||||
loadMore={this.handleInfiniteOnLoad}
|
||||
hasMore={!this.state.loading && this.state.hasMore}
|
||||
useWindow={false}
|
||||
dataLength={data.length}
|
||||
next={loadMoreData}
|
||||
hasMore={data.length < 50}
|
||||
loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
|
||||
endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
|
||||
scrollableTarget="scrollableDiv"
|
||||
>
|
||||
<List
|
||||
dataSource={this.state.data}
|
||||
dataSource={data}
|
||||
renderItem={item => (
|
||||
<List.Item key={item.id}>
|
||||
<List.Item.Meta
|
||||
@ -94,40 +74,11 @@ class InfiniteListExample extends React.Component {
|
||||
<div>Content</div>
|
||||
</List.Item>
|
||||
)}
|
||||
>
|
||||
{this.state.loading && this.state.hasMore && (
|
||||
<div className="demo-loading-container">
|
||||
<Spin />
|
||||
</div>
|
||||
)}
|
||||
</List>
|
||||
/>
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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
|
||||
import { List, message, Avatar, Spin } from 'antd';
|
||||
|
||||
import reqwest from 'reqwest';
|
||||
|
||||
import WindowScroller from 'react-virtualized/dist/commonjs/WindowScroller';
|
||||
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
|
||||
import VList from 'react-virtualized/dist/commonjs/List';
|
||||
|
||||
@ -15,7 +15,6 @@ Load more list with `loadMore` property.
|
||||
|
||||
```jsx
|
||||
import { List, Avatar, Button, Skeleton } from 'antd';
|
||||
|
||||
import reqwest from 'reqwest';
|
||||
|
||||
const count = 3;
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
&-more {
|
||||
margin-top: @margin-sm;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
padding-right: 32px;
|
||||
padding-left: 32px;
|
||||
@ -66,30 +67,36 @@
|
||||
&-avatar {
|
||||
margin-right: @list-item-meta-avatar-margin-right;
|
||||
}
|
||||
|
||||
&-content {
|
||||
flex: 1 0;
|
||||
width: 0;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 4px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
|
||||
> a {
|
||||
color: @text-color;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: @text-color-secondary;
|
||||
font-size: @list-item-meta-description-font-size;
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
}
|
||||
|
||||
&-action {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 48px;
|
||||
@ -146,6 +153,7 @@
|
||||
|
||||
&-split &-item {
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
@ -204,6 +212,7 @@
|
||||
|
||||
> li {
|
||||
padding: 0 @padding-md;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
.@{list-prefix-cls} {
|
||||
&-item {
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-action {
|
||||
margin-left: 12px;
|
||||
}
|
||||
@ -29,9 +30,11 @@
|
||||
.@{list-prefix-cls}-vertical {
|
||||
.@{list-prefix-cls}-item {
|
||||
flex-wrap: wrap-reverse;
|
||||
|
||||
&-main {
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
&-extra {
|
||||
margin: auto auto 16px;
|
||||
}
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
.@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
|
||||
opacity: 0.45;
|
||||
transition: all 0.3s;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
background: @menu-dark-arrow-color;
|
||||
@ -65,6 +66,7 @@
|
||||
left: 0;
|
||||
margin-left: 0;
|
||||
border-right: 0;
|
||||
|
||||
&::after {
|
||||
border-right: 0;
|
||||
}
|
||||
@ -83,6 +85,7 @@
|
||||
&-dark &-submenu-title:hover {
|
||||
color: @menu-dark-highlight-color;
|
||||
background-color: transparent;
|
||||
|
||||
> a,
|
||||
> span > a {
|
||||
color: @menu-dark-highlight-color;
|
||||
@ -90,6 +93,7 @@
|
||||
> .@{menu-prefix-cls}-submenu-title {
|
||||
> .@{menu-prefix-cls}-submenu-arrow {
|
||||
opacity: 1;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
background: @menu-dark-highlight-color;
|
||||
@ -97,6 +101,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-dark &-item:hover {
|
||||
background-color: @menu-dark-item-hover-bg;
|
||||
}
|
||||
@ -108,9 +113,11 @@
|
||||
&-dark &-item-selected {
|
||||
color: @menu-dark-highlight-color;
|
||||
border-right: 0;
|
||||
|
||||
&::after {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
> a,
|
||||
> span > a,
|
||||
> a:hover,
|
||||
|
||||
@ -67,6 +67,7 @@
|
||||
transition: border-color @animation-duration-slow @ease-in-out,
|
||||
background @animation-duration-slow @ease-in-out;
|
||||
}
|
||||
|
||||
&-submenu,
|
||||
&-submenu-inline {
|
||||
transition: border-color @animation-duration-slow @ease-in-out,
|
||||
@ -95,9 +96,11 @@
|
||||
|
||||
&-item a {
|
||||
color: @menu-item-color;
|
||||
|
||||
&:hover {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -112,6 +115,7 @@
|
||||
// https://github.com/ant-design/ant-design/issues/19809
|
||||
&-item > .@{ant-prefix}-badge a {
|
||||
color: @menu-item-color;
|
||||
|
||||
&:hover {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
@ -142,6 +146,7 @@
|
||||
|
||||
&-item-selected {
|
||||
color: @menu-highlight-color;
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
color: @menu-highlight-color;
|
||||
@ -182,6 +187,7 @@
|
||||
left: 0;
|
||||
margin-left: 0;
|
||||
border-right: 0;
|
||||
|
||||
&::after {
|
||||
border-right: 0;
|
||||
}
|
||||
@ -218,6 +224,7 @@
|
||||
font-size: @menu-icon-size;
|
||||
transition: font-size @menu-animation-duration-normal @ease-out,
|
||||
margin @animation-duration-slow @ease-in-out, color @animation-duration-slow;
|
||||
|
||||
+ span {
|
||||
margin-left: @menu-icon-margin-right;
|
||||
opacity: 1;
|
||||
@ -280,6 +287,7 @@
|
||||
> .@{menu-prefix-cls} {
|
||||
background-color: @menu-bg;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
&-submenu-title::after {
|
||||
transition: transform @animation-duration-slow @ease-in-out;
|
||||
}
|
||||
@ -314,9 +322,11 @@
|
||||
color @animation-duration-slow @ease-in-out;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: rotate(45deg) translateY(-2.5px);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg) translateY(2.5px);
|
||||
}
|
||||
@ -333,6 +343,7 @@
|
||||
&::before {
|
||||
transform: rotate(-45deg) translateX(2.5px);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(45deg) translateX(-2.5px);
|
||||
}
|
||||
@ -345,9 +356,11 @@
|
||||
&-open&-inline > &-title > &-arrow {
|
||||
// ↑
|
||||
transform: translateY(-2px);
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg) translateX(-2.5px);
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: rotate(45deg) translateX(2.5px);
|
||||
}
|
||||
@ -411,13 +424,16 @@
|
||||
> .@{menu-prefix-cls}-item {
|
||||
a {
|
||||
color: @menu-item-color;
|
||||
|
||||
&:hover {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&-selected a {
|
||||
color: @menu-highlight-color;
|
||||
}
|
||||
@ -437,6 +453,7 @@
|
||||
&-inline {
|
||||
.@{menu-prefix-cls}-item {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -555,6 +572,7 @@
|
||||
margin: 0;
|
||||
font-size: @menu-icon-size-lg;
|
||||
line-height: @menu-item-height;
|
||||
|
||||
+ span {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
@ -574,6 +592,7 @@
|
||||
.@{iconfont-css-prefix} {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @text-color-dark;
|
||||
}
|
||||
|
||||
@ -87,6 +87,7 @@
|
||||
transform: rotate(-45deg) translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
.@{menu-prefix-cls}-rtl & {
|
||||
transform: rotate(45deg) translateY(2px);
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
|
||||
&-selected {
|
||||
color: @menu-highlight-danger-color;
|
||||
|
||||
> a,
|
||||
> a:hover {
|
||||
color: @menu-highlight-danger-color;
|
||||
|
||||
@ -63,6 +63,7 @@
|
||||
padding: 8px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
|
||||
@ -106,6 +106,7 @@
|
||||
|
||||
.@{dialog-prefix-cls}-centered {
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
|
||||
@ -50,6 +50,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-btns {
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
float: left;
|
||||
|
||||
@ -69,6 +69,7 @@
|
||||
max-width: 4px;
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
content: '';
|
||||
@ -109,12 +110,15 @@
|
||||
&-success {
|
||||
color: @success-color;
|
||||
}
|
||||
|
||||
&-info {
|
||||
color: @info-color;
|
||||
}
|
||||
|
||||
&-warning {
|
||||
color: @warning-color;
|
||||
}
|
||||
|
||||
&-error {
|
||||
color: @error-color;
|
||||
}
|
||||
@ -181,6 +185,7 @@
|
||||
left: @notification-width;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
@ -192,6 +197,7 @@
|
||||
right: @notification-width;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
right: 0;
|
||||
opacity: 1;
|
||||
@ -204,6 +210,7 @@
|
||||
margin-bottom: @notification-margin-bottom;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
max-height: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -90,6 +90,7 @@
|
||||
margin-left: @margin-sm;
|
||||
white-space: unset;
|
||||
}
|
||||
|
||||
> *:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -105,6 +106,7 @@
|
||||
.@{ant-prefix}-tabs {
|
||||
> .@{ant-prefix}-tabs-nav {
|
||||
margin: 0;
|
||||
|
||||
&::before {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -56,6 +56,7 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> *:first-child {
|
||||
.@{pageheader-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
|
||||
@ -63,6 +63,7 @@
|
||||
&:hover {
|
||||
border-color: @primary-color;
|
||||
transition: all 0.3s;
|
||||
|
||||
a {
|
||||
color: @primary-color;
|
||||
}
|
||||
@ -101,6 +102,7 @@
|
||||
letter-spacing: -1px;
|
||||
opacity: 0;
|
||||
transition: all 0.2s;
|
||||
|
||||
&-svg {
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -144,6 +146,7 @@
|
||||
&-jump-next {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&-prev,
|
||||
&-next,
|
||||
&-jump-prev,
|
||||
@ -259,6 +262,7 @@
|
||||
height: @pagination-item-size-sm;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
|
||||
&::after {
|
||||
height: @pagination-item-size-sm;
|
||||
line-height: @pagination-item-size-sm;
|
||||
@ -326,6 +330,7 @@
|
||||
&.mini &-next &-item-link {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
|
||||
&::after {
|
||||
height: @pagination-item-size-sm;
|
||||
line-height: @pagination-item-size-sm;
|
||||
@ -377,6 +382,7 @@
|
||||
|
||||
&-active {
|
||||
background: @pagination-item-disabled-bg-active;
|
||||
|
||||
a {
|
||||
color: @pagination-item-disabled-color-active;
|
||||
}
|
||||
|
||||
@ -99,6 +99,7 @@
|
||||
color: @warning-color;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
&-title {
|
||||
padding-left: @font-size-base + 8px;
|
||||
}
|
||||
@ -149,6 +150,7 @@
|
||||
transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&-placement-top &-arrow {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
@ -172,13 +174,16 @@
|
||||
transform: translateX((@popover-arrow-rotate-width / 2)) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&-placement-right &-arrow {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&-placement-rightTop &-arrow {
|
||||
top: @popover-arrow-offset-vertical;
|
||||
}
|
||||
|
||||
&-placement-rightBottom &-arrow {
|
||||
bottom: @popover-arrow-offset-vertical;
|
||||
}
|
||||
|
||||
@ -16,11 +16,13 @@
|
||||
|
||||
&-steps {
|
||||
display: inline-block;
|
||||
|
||||
&-outer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-item {
|
||||
flex-shrink: 0;
|
||||
min-width: 2px;
|
||||
@ -180,6 +182,7 @@
|
||||
color: @error-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-circle&-status-success {
|
||||
.@{progress-prefix-cls}-text {
|
||||
color: @success-color;
|
||||
@ -192,10 +195,12 @@
|
||||
transform: translateX(-100%) scaleX(0);
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: translateX(-100%) scaleX(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0) scaleX(1);
|
||||
opacity: 0;
|
||||
|
||||
@ -1,17 +1,15 @@
|
||||
import React from 'react';
|
||||
import { mount, render } from 'enzyme';
|
||||
import Radio from '../radio';
|
||||
import RadioGroup from '../group';
|
||||
import RadioButton from '../radioButton';
|
||||
import Radio from '..';
|
||||
|
||||
describe('Radio Group', () => {
|
||||
function createRadioGroup(props) {
|
||||
return (
|
||||
<RadioGroup {...props}>
|
||||
<Radio.Group {...props}>
|
||||
<Radio value="A">A</Radio>
|
||||
<Radio value="B">B</Radio>
|
||||
<Radio value="C">C</Radio>
|
||||
</RadioGroup>
|
||||
</Radio.Group>
|
||||
);
|
||||
}
|
||||
|
||||
@ -22,7 +20,7 @@ describe('Radio Group', () => {
|
||||
{ label: 'C', value: 'C' },
|
||||
];
|
||||
|
||||
return <RadioGroup {...props} options={options} />;
|
||||
return <Radio.Group {...props} options={options} />;
|
||||
}
|
||||
|
||||
it('responses hover events', () => {
|
||||
@ -30,9 +28,9 @@ describe('Radio Group', () => {
|
||||
const onMouseLeave = jest.fn();
|
||||
|
||||
const wrapper = mount(
|
||||
<RadioGroup onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
|
||||
<Radio.Group onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
|
||||
<Radio />
|
||||
</RadioGroup>,
|
||||
</Radio.Group>,
|
||||
);
|
||||
|
||||
wrapper.find('div').at(0).simulate('mouseenter');
|
||||
@ -63,7 +61,7 @@ describe('Radio Group', () => {
|
||||
const onChangeRadioGroup = jest.fn();
|
||||
|
||||
const wrapper = mount(
|
||||
<RadioGroup onChange={onChangeRadioGroup}>
|
||||
<Radio.Group onChange={onChangeRadioGroup}>
|
||||
<Radio value="A" onChange={onChange}>
|
||||
A
|
||||
</Radio>
|
||||
@ -73,7 +71,7 @@ describe('Radio Group', () => {
|
||||
<Radio value="C" onChange={onChange}>
|
||||
C
|
||||
</Radio>
|
||||
</RadioGroup>,
|
||||
</Radio.Group>,
|
||||
);
|
||||
const radios = wrapper.find('input');
|
||||
|
||||
@ -87,11 +85,11 @@ describe('Radio Group', () => {
|
||||
const onChange = jest.fn();
|
||||
|
||||
const wrapper = mount(
|
||||
<RadioGroup onChange={onChange}>
|
||||
<RadioButton value="A">A</RadioButton>
|
||||
<RadioButton value="B">B</RadioButton>
|
||||
<RadioButton value="C">C</RadioButton>
|
||||
</RadioGroup>,
|
||||
<Radio.Group onChange={onChange}>
|
||||
<Radio.Button value="A">A</Radio.Button>
|
||||
<Radio.Button value="B">B</Radio.Button>
|
||||
<Radio.Button value="C">C</Radio.Button>
|
||||
</Radio.Group>,
|
||||
);
|
||||
const radios = wrapper.find('input');
|
||||
|
||||
@ -104,7 +102,7 @@ describe('Radio Group', () => {
|
||||
it('should only trigger once when in group with options', () => {
|
||||
const onChange = jest.fn();
|
||||
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');
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
@ -147,9 +145,7 @@ describe('Radio Group', () => {
|
||||
{ label: 'Apple', value: 'Apple' },
|
||||
{ label: 'Orange', value: 'Orange', style: { fontSize: 12 } },
|
||||
];
|
||||
|
||||
const wrapper = render(<RadioGroup prefixCls="my-radio" options={options} />);
|
||||
|
||||
const wrapper = render(<Radio.Group prefixCls="my-radio" options={options} />);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -166,11 +162,46 @@ describe('Radio Group', () => {
|
||||
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', () => {
|
||||
it('use `defaultValue` when `value` is undefined', () => {
|
||||
const options = [{ label: 'Bamboo', value: 'bamboo' }];
|
||||
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(
|
||||
true,
|
||||
@ -180,7 +211,7 @@ describe('Radio Group', () => {
|
||||
[undefined, null].forEach(newValue => {
|
||||
it(`should set value back when value change back to ${newValue}`, () => {
|
||||
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(
|
||||
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}
|
||||
onMouseLeave={props.onMouseLeave}
|
||||
>
|
||||
<RcCheckbox {...radioProps} prefixCls={prefixCls} ref={mergedRef} />
|
||||
<RcCheckbox {...radioProps} type="radio" prefixCls={prefixCls} ref={mergedRef} />
|
||||
{children !== undefined ? <span>{children}</span> : null}
|
||||
</label>
|
||||
);
|
||||
@ -59,8 +59,4 @@ const Radio = React.forwardRef<unknown, RadioProps>(InternalRadio);
|
||||
|
||||
Radio.displayName = 'Radio';
|
||||
|
||||
Radio.defaultProps = {
|
||||
type: 'radio',
|
||||
};
|
||||
|
||||
export default Radio;
|
||||
|
||||
@ -126,6 +126,7 @@
|
||||
.@{radio-prefix-cls}-checked {
|
||||
.@{radio-inner-prefix-cls} {
|
||||
border-color: @radio-dot-color;
|
||||
|
||||
&::after {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
@ -141,6 +142,7 @@
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @border-color-base !important;
|
||||
cursor: not-allowed;
|
||||
|
||||
&::after {
|
||||
background-color: @radio-dot-disabled-color;
|
||||
}
|
||||
@ -268,6 +270,7 @@ span.@{radio-prefix-cls} + * {
|
||||
&:hover {
|
||||
color: @radio-button-hover-color;
|
||||
border-color: @radio-button-hover-color;
|
||||
|
||||
&::before {
|
||||
background-color: @radio-button-hover-color;
|
||||
}
|
||||
@ -276,6 +279,7 @@ span.@{radio-prefix-cls} + * {
|
||||
&:active {
|
||||
color: @radio-button-active-color;
|
||||
border-color: @radio-button-active-color;
|
||||
|
||||
&::before {
|
||||
background-color: @radio-button-active-color;
|
||||
}
|
||||
@ -290,16 +294,19 @@ span.@{radio-prefix-cls} + * {
|
||||
color: @radio-solid-checked-color;
|
||||
background: @radio-dot-color;
|
||||
border-color: @radio-dot-color;
|
||||
|
||||
&:hover {
|
||||
color: @radio-solid-checked-color;
|
||||
background: @radio-button-hover-color;
|
||||
border-color: @radio-button-hover-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @radio-solid-checked-color;
|
||||
background: @radio-button-active-color;
|
||||
border-color: @radio-button-active-color;
|
||||
}
|
||||
|
||||
&:focus-within {
|
||||
box-shadow: @radio-button-focus-shadow;
|
||||
}
|
||||
@ -317,6 +324,7 @@ span.@{radio-prefix-cls} + * {
|
||||
background-color: @input-disabled-bg;
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left-color: @border-color-base;
|
||||
}
|
||||
@ -335,6 +343,7 @@ span.@{radio-prefix-cls} + * {
|
||||
transform: scale(1);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.6);
|
||||
opacity: 0;
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
|
||||
&-disabled &-star {
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
@ -55,6 +55,7 @@
|
||||
&-extra {
|
||||
margin: @result-extra-margin;
|
||||
text-align: center;
|
||||
|
||||
> * {
|
||||
margin-right: 8px;
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../input/style/mixin';
|
||||
|
||||
@import './single';
|
||||
@import './multiple';
|
||||
|
||||
@ -167,9 +166,11 @@
|
||||
opacity: 0;
|
||||
transition: color 0.3s ease, opacity 0.15s ease;
|
||||
text-rendering: auto;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
|
||||
@ -271,6 +271,7 @@
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
@ -120,9 +120,11 @@
|
||||
&:first-child {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
&-active {
|
||||
border-color: @slider-dot-border-color-active;
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
|
||||
.@{space-prefix-cls} {
|
||||
display: inline-flex;
|
||||
|
||||
&-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -14,12 +15,15 @@
|
||||
&-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
@ -142,16 +142,19 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
top: 0;
|
||||
right: 0;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
@ -74,6 +74,7 @@
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&-tail {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
@ -91,6 +92,7 @@
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -110,6 +112,7 @@
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
display: inline;
|
||||
margin-left: 8px;
|
||||
@ -117,18 +120,21 @@
|
||||
font-weight: normal;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
.step-item-status(wait);
|
||||
.step-item-status(process);
|
||||
|
||||
&-process > &-container > &-icon {
|
||||
background: @process-icon-color;
|
||||
.@{steps-prefix-cls}-icon {
|
||||
color: @process-icon-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-process > &-container > &-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
@ -197,9 +203,11 @@
|
||||
&:last-child .@{steps-prefix-cls}-item-title {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&-tail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-description {
|
||||
max-width: @steps-description-max-width;
|
||||
white-space: normal;
|
||||
@ -224,6 +232,7 @@
|
||||
}
|
||||
&-@{status} > &-container > &-content > &-title {
|
||||
color: @@title-color;
|
||||
|
||||
&::after {
|
||||
background-color: @@tail-color;
|
||||
}
|
||||
|
||||
@ -1,27 +1,33 @@
|
||||
.@{steps-prefix-cls}-label-vertical {
|
||||
.@{steps-prefix-cls}-item {
|
||||
overflow: visible;
|
||||
|
||||
&-tail {
|
||||
margin-left: 58px;
|
||||
padding: 3.5px 24px;
|
||||
}
|
||||
|
||||
&-content {
|
||||
display: block;
|
||||
width: ((@steps-icon-size / 2) + 42px) * 2;
|
||||
margin-top: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
display: inline-block;
|
||||
margin-left: 42px;
|
||||
}
|
||||
|
||||
&-title {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
|
||||
@ -41,6 +41,7 @@
|
||||
&:not(.@{steps-prefix-cls}-item-active) {
|
||||
.@{steps-prefix-cls}-item-container[role='button'] {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
@ -49,6 +50,7 @@
|
||||
|
||||
&:last-child {
|
||||
flex: 1;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
@ -93,6 +95,7 @@
|
||||
.@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-vertical {
|
||||
> .@{steps-prefix-cls}-item {
|
||||
margin-right: 0 !important;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
@ -104,6 +107,7 @@
|
||||
width: 3px;
|
||||
height: calc(100% - 24px);
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
&-title {
|
||||
line-height: @line-height-base;
|
||||
}
|
||||
|
||||
&-tail {
|
||||
top: @steps-dot-top;
|
||||
width: 100%;
|
||||
@ -19,6 +20,7 @@
|
||||
&:first-child .@{steps-prefix-cls}-icon-dot {
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
width: @steps-dot-size;
|
||||
height: @steps-dot-size;
|
||||
@ -47,6 +49,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
width: @steps-description-max-width;
|
||||
}
|
||||
|
||||
@ -193,6 +193,7 @@
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
.@{steps-prefix-cls}-rtl& {
|
||||
margin-right: 67px;
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
padding-right: 12px;
|
||||
font-size: @font-size-base;
|
||||
line-height: @steps-small-icon-size;
|
||||
|
||||
&::after {
|
||||
top: (@steps-small-icon-size / 2);
|
||||
}
|
||||
|
||||
@ -199,6 +199,7 @@ sup {
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
// For common/openAnimation
|
||||
.ant-motion-collapse-legacy {
|
||||
overflow: hidden;
|
||||
|
||||
&-active {
|
||||
transition: height @animation-duration-base @ease-in-out,
|
||||
opacity @animation-duration-base @ease-in-out !important;
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
@ -26,6 +27,7 @@
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
transform-origin: 0 0;
|
||||
@ -35,6 +36,7 @@
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(100%);
|
||||
transform-origin: 0 0;
|
||||
@ -48,6 +50,7 @@
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
transform-origin: 0 0;
|
||||
@ -61,6 +64,7 @@
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
transform-origin: 0 0;
|
||||
@ -74,6 +78,7 @@
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
transform-origin: 0 0;
|
||||
@ -87,6 +92,7 @@
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
transform-origin: 0 0;
|
||||
@ -100,6 +106,7 @@
|
||||
transform-origin: 0 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0%);
|
||||
transform-origin: 0 0;
|
||||
@ -113,6 +120,7 @@
|
||||
transform-origin: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(-100%);
|
||||
transform-origin: 0 0;
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
transform-origin: 0% 0%;
|
||||
@ -35,6 +36,7 @@
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleY(0.8);
|
||||
transform-origin: 0% 0%;
|
||||
@ -48,6 +50,7 @@
|
||||
transform-origin: 100% 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
transform-origin: 100% 100%;
|
||||
@ -61,6 +64,7 @@
|
||||
transform-origin: 100% 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleY(0.8);
|
||||
transform-origin: 100% 100%;
|
||||
@ -74,6 +78,7 @@
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleX(1);
|
||||
transform-origin: 0% 0%;
|
||||
@ -87,6 +92,7 @@
|
||||
transform-origin: 0% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleX(0.8);
|
||||
transform-origin: 0% 0%;
|
||||
@ -100,6 +106,7 @@
|
||||
transform-origin: 100% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleX(1);
|
||||
transform-origin: 100% 0%;
|
||||
@ -113,6 +120,7 @@
|
||||
transform-origin: 100% 0%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scaleX(0.8);
|
||||
transform-origin: 100% 0%;
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
transform: scale(0.2);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
@ -43,6 +44,7 @@
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.2);
|
||||
opacity: 0;
|
||||
@ -54,6 +56,7 @@
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
@ -64,6 +67,7 @@
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
@ -76,6 +80,7 @@
|
||||
transform-origin: 50% 0%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 0%;
|
||||
@ -87,6 +92,7 @@
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 0%;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
transform-origin: 50% 0%;
|
||||
@ -100,6 +106,7 @@
|
||||
transform-origin: 0% 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
transform-origin: 0% 50%;
|
||||
@ -111,6 +118,7 @@
|
||||
transform: scale(1);
|
||||
transform-origin: 0% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
transform-origin: 0% 50%;
|
||||
@ -124,6 +132,7 @@
|
||||
transform-origin: 100% 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
transform-origin: 100% 50%;
|
||||
@ -135,6 +144,7 @@
|
||||
transform: scale(1);
|
||||
transform-origin: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
transform-origin: 100% 50%;
|
||||
@ -148,6 +158,7 @@
|
||||
transform-origin: 50% 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 100%;
|
||||
@ -159,6 +170,7 @@
|
||||
transform: scale(1);
|
||||
transform-origin: 50% 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.8);
|
||||
transform-origin: 50% 100%;
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
display: table;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&::after {
|
||||
// https://github.com/ant-design/ant-design/issues/21864
|
||||
display: table;
|
||||
|
||||
@ -64,6 +64,7 @@
|
||||
.@{table-prefix-cls}-row-expand-icon {
|
||||
border: @popover-border;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
@ -72,6 +73,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
> tr {
|
||||
> th {
|
||||
@ -80,6 +82,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
> tr {
|
||||
> td {
|
||||
|
||||
@ -45,6 +45,7 @@
|
||||
&-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: @switch-disabled-opacity;
|
||||
|
||||
* {
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
@import './size';
|
||||
|
||||
@import (reference) '../../style/themes/index';
|
||||
@table-prefix-cls: ~'@{ant-prefix}-table';
|
||||
|
||||
|
||||
@ -539,6 +539,7 @@
|
||||
&-collapsed::before {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
&-collapsed::after {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
@ -593,6 +594,7 @@
|
||||
.@{table-prefix-cls}-empty & {
|
||||
color: @disabled-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
> td {
|
||||
background: @component-background;
|
||||
@ -651,6 +653,7 @@
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
@ -689,6 +692,7 @@
|
||||
box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&-sticky {
|
||||
&-holder {
|
||||
position: sticky;
|
||||
@ -705,16 +709,20 @@
|
||||
background: lighten(@table-border-color, 80%);
|
||||
border-top: 1px solid @table-border-color;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
|
||||
&-bar {
|
||||
height: 8px;
|
||||
background-color: @table-sticky-scroll-bar-bg;
|
||||
border-radius: @table-sticky-scroll-bar-radius;
|
||||
|
||||
&:hover {
|
||||
background-color: @table-sticky-scroll-bar-active-bg;
|
||||
}
|
||||
|
||||
&-active {
|
||||
background-color: @table-sticky-scroll-bar-active-bg;
|
||||
}
|
||||
@ -730,6 +738,7 @@
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-ping-right {
|
||||
.@{table-prefix-cls}-cell-fix-right-first::after {
|
||||
box-shadow: none !important;
|
||||
|
||||
@ -40,6 +40,7 @@
|
||||
left: 0;
|
||||
box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
|
||||
@ -123,6 +124,7 @@
|
||||
top: 0;
|
||||
box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: 0;
|
||||
box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);
|
||||
|
||||
@ -77,6 +77,7 @@
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-menu-item {
|
||||
.@{tab-prefix-cls}-dropdown-rtl & {
|
||||
text-align: right;
|
||||
|
||||
@ -58,16 +58,20 @@
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(&-checked):hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&-checked {
|
||||
color: @text-color-inverse;
|
||||
}
|
||||
|
||||
&-checked {
|
||||
background-color: @primary-6;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @primary-7;
|
||||
}
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
padding-right: @control-padding-horizontal-sm;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&-action {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
@ -35,6 +36,7 @@
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&-title {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
text-align: left;
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
vertical-align: baseline;
|
||||
|
||||
svg {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
@ -27,6 +28,7 @@
|
||||
background-color: @primary-color;
|
||||
border-radius: 1px;
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
@ -187,6 +189,7 @@
|
||||
border-right: 1px solid @normal-color;
|
||||
content: ' ';
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
width: @tree-title-height - 14px;
|
||||
@ -233,6 +236,7 @@
|
||||
line-height: @tree-title-height;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
@ -310,6 +314,7 @@
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -316,10 +316,14 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
|
||||
const { ellipsisText, isEllipsis, expanded } = this.state;
|
||||
const { rows, suffix, onEllipsis } = this.getEllipsis();
|
||||
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
|
||||
if (this.canUseCSSEllipsis()) return;
|
||||
if (this.canUseCSSEllipsis()) {
|
||||
return;
|
||||
}
|
||||
|
||||
devWarning(
|
||||
toArray(children).every((child: React.ReactNode) => typeof child === 'string'),
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
|
||||
&&-danger {
|
||||
color: @error-color;
|
||||
|
||||
a&:active,
|
||||
a&:focus,
|
||||
a&:hover {
|
||||
@ -45,18 +46,22 @@
|
||||
h1 {
|
||||
.typography-title-1();
|
||||
}
|
||||
|
||||
h2&,
|
||||
h2 {
|
||||
.typography-title-2();
|
||||
}
|
||||
|
||||
h3&,
|
||||
h3 {
|
||||
.typography-title-3();
|
||||
}
|
||||
|
||||
h4&,
|
||||
h4 {
|
||||
.typography-title-4();
|
||||
}
|
||||
|
||||
h5&,
|
||||
h5 {
|
||||
.typography-title-5();
|
||||
|
||||
@ -106,8 +106,9 @@ export default (
|
||||
// Get origin style
|
||||
const originStyle = window.getComputedStyle(originElement);
|
||||
const lineHeight = getRealLineHeight(originElement);
|
||||
const maxHeight =
|
||||
Math.floor(lineHeight) * (rows + 1) +
|
||||
const overflowRows = rows + 1;
|
||||
const oneRowMaxHeight =
|
||||
Math.floor(lineHeight) +
|
||||
pxToNumber(originStyle.paddingTop) +
|
||||
pxToNumber(originStyle.paddingBottom);
|
||||
|
||||
@ -128,7 +129,9 @@ export default (
|
||||
|
||||
// Check if ellipsis in measure div is height enough for content
|
||||
function inRange() {
|
||||
return Math.ceil(ellipsisContainer.getBoundingClientRect().height) < maxHeight;
|
||||
return (
|
||||
Math.ceil(ellipsisContainer.getBoundingClientRect().height / overflowRows) < oneRowMaxHeight
|
||||
);
|
||||
}
|
||||
|
||||
// Skip ellipsis if already match
|
||||
@ -223,6 +226,7 @@ export default (
|
||||
reactNode: null,
|
||||
};
|
||||
}
|
||||
|
||||
if (type === TEXT_NODE) {
|
||||
const fullText = childNode.textContent || '';
|
||||
const textNode = document.createTextNode(fullText);
|
||||
|
||||
@ -121,6 +121,7 @@
|
||||
color: @disabled-color;
|
||||
font-size: 30px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
@ -149,6 +150,7 @@
|
||||
height: @line-height-base * @font-size-base;
|
||||
margin-top: @margin-xs;
|
||||
font-size: @font-size-base;
|
||||
|
||||
&-name {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
@ -246,6 +248,7 @@
|
||||
.@{iconfont-css-prefix} {
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-item-list-type-text {
|
||||
&:hover {
|
||||
.@{upload-prefix-cls}-list-item-name-icon-count-1 {
|
||||
@ -37,6 +38,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
&-name {
|
||||
.@{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) |
|
||||
| Code highlight | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
|
||||
| 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) |
|
||||
| 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) |
|
||||
|
||||
@ -26,7 +26,7 @@ title: 社区精选组件
|
||||
| 应用国际化 | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
|
||||
| 代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
|
||||
| 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-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) |
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user