mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
Merge pull request #22381 from ant-design/master
chore: 🔀 merge master into feature
This commit is contained in:
偏右
GitHub
commit
b80788556d
@ -20,7 +20,7 @@ const eslintrc = {
|
||||
},
|
||||
},
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['markdown', 'react', 'babel', 'jest', '@typescript-eslint'],
|
||||
plugins: ['markdown', 'react', 'babel', 'jest', '@typescript-eslint', 'react-hooks'],
|
||||
// https://github.com/typescript-eslint/typescript-eslint/issues/46#issuecomment-470486034
|
||||
overrides: [
|
||||
{
|
||||
@ -90,6 +90,7 @@ const eslintrc = {
|
||||
'react/static-property-placement': 0,
|
||||
'jest/no-test-callback': 0,
|
||||
'jest/expect-expect': 0,
|
||||
'react-hooks/rules-of-hooks': 2, // Checks rules of Hooks
|
||||
},
|
||||
globals: {
|
||||
gtag: true,
|
||||
|
||||
@ -11,33 +11,18 @@
|
||||
word-wrap: break-word;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
&-rtl {
|
||||
padding: 8px 37px 8px 15px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&&-no-icon {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
|
||||
&&-closable {
|
||||
padding-right: 30px;
|
||||
|
||||
.@{alert-prefix-cls}-rtl& {
|
||||
padding-right: 15px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
|
||||
left: 16px;
|
||||
|
||||
.@{alert-prefix-cls}-rtl & {
|
||||
right: 16px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-description {
|
||||
@ -97,11 +82,6 @@
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
.@{alert-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
color: @alert-close-color;
|
||||
transition: color 0.3s;
|
||||
@ -125,10 +105,6 @@
|
||||
color: @alert-text-color;
|
||||
line-height: @line-height-base;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
.@{alert-prefix-cls}-rtl& {
|
||||
padding: 15px 64px 15px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-description&-no-icon {
|
||||
@ -140,11 +116,6 @@
|
||||
top: 16px;
|
||||
left: 24px;
|
||||
font-size: 24px;
|
||||
|
||||
.@{alert-prefix-cls}-rtl& {
|
||||
right: 24px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-description &-close-icon {
|
||||
@ -153,11 +124,6 @@
|
||||
right: 16px;
|
||||
font-size: @font-size-base;
|
||||
cursor: pointer;
|
||||
|
||||
.@{alert-prefix-cls}-rtl& {
|
||||
right: auto;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-description &-message {
|
||||
@ -221,3 +187,5 @@
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl.less';
|
||||
|
||||
58
components/alert/style/rtl.less
Normal file
58
components/alert/style/rtl.less
Normal file
@ -0,0 +1,58 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@alert-prefix-cls: ~'@{ant-prefix}-alert';
|
||||
|
||||
.@{alert-prefix-cls} {
|
||||
&-rtl {
|
||||
padding: 8px 37px 8px 15px;
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&&-closable {
|
||||
.@{alert-prefix-cls}-rtl& {
|
||||
padding-right: 15px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
.@{alert-prefix-cls}-rtl & {
|
||||
right: 16px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-close-icon {
|
||||
.@{alert-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-description {
|
||||
.@{alert-prefix-cls}-rtl& {
|
||||
padding: 15px 64px 15px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-description&-no-icon {
|
||||
.@{alert-prefix-cls}-rtl& {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-description &-icon {
|
||||
.@{alert-prefix-cls}-rtl& {
|
||||
right: 24px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-with-description &-close-icon {
|
||||
.@{alert-prefix-cls}-rtl& {
|
||||
right: auto;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8,4 +8,9 @@
|
||||
|
||||
.@{autocomplete-prefix-cls} {
|
||||
.reset-component;
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/22302
|
||||
.@{select-prefix-cls}-clear {
|
||||
right: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './rtl';
|
||||
|
||||
@badge-prefix-cls: ~'@{ant-prefix}-badge';
|
||||
@number-prefix-cls: ~'@{ant-prefix}-scroll-number';
|
||||
@ -12,10 +13,6 @@
|
||||
color: unset;
|
||||
line-height: 1;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-count {
|
||||
z-index: @zindex-badge;
|
||||
min-width: @badge-height;
|
||||
@ -57,20 +54,6 @@
|
||||
right: 0;
|
||||
transform: translate(50%, -50%);
|
||||
transform-origin: 100% 0%;
|
||||
|
||||
.@{badge-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component {
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
&-status {
|
||||
@ -129,11 +112,6 @@
|
||||
margin-left: 8px;
|
||||
color: @text-color;
|
||||
font-size: @font-size-base;
|
||||
|
||||
.@{badge-prefix-cls}-rtl & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -141,19 +119,11 @@
|
||||
&-zoom-enter {
|
||||
animation: antZoomBadgeIn 0.3s @ease-out-back;
|
||||
animation-fill-mode: both;
|
||||
|
||||
.@{badge-prefix-cls}-rtl & {
|
||||
animation-name: antZoomBadgeInRtl;
|
||||
}
|
||||
}
|
||||
|
||||
&-zoom-leave {
|
||||
animation: antZoomBadgeOut 0.3s @ease-in-back;
|
||||
animation-fill-mode: both;
|
||||
|
||||
.@{badge-prefix-cls}-rtl & {
|
||||
animation-name: antZoomBadgeOutRtl;
|
||||
}
|
||||
}
|
||||
|
||||
&-not-a-wrapper {
|
||||
@ -220,23 +190,3 @@
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomBadgeInRtl {
|
||||
0% {
|
||||
transform: scale(0) translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomBadgeOutRtl {
|
||||
0% {
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0) translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
71
components/badge/style/rtl.less
Normal file
71
components/badge/style/rtl.less
Normal file
@ -0,0 +1,71 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@badge-prefix-cls: ~'@{ant-prefix}-badge';
|
||||
@number-prefix-cls: ~'@{ant-prefix}-scroll-number';
|
||||
|
||||
.@{badge-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-count,
|
||||
&-dot,
|
||||
.@{number-prefix-cls}-custom-component {
|
||||
.@{badge-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.@{badge-prefix-cls}-rtl& .@{number-prefix-cls}-custom-component {
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
transform-origin: 0% 0%;
|
||||
}
|
||||
|
||||
&-status {
|
||||
&-text {
|
||||
.@{badge-prefix-cls}-rtl & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-zoom-appear,
|
||||
&-zoom-enter {
|
||||
.@{badge-prefix-cls}-rtl & {
|
||||
animation-name: antZoomBadgeInRtl;
|
||||
}
|
||||
}
|
||||
|
||||
&-zoom-leave {
|
||||
.@{badge-prefix-cls}-rtl & {
|
||||
animation-name: antZoomBadgeOutRtl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomBadgeInRtl {
|
||||
0% {
|
||||
transform: scale(0) translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antZoomBadgeOutRtl {
|
||||
0% {
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0) translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,12 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './rtl';
|
||||
|
||||
@carousel-prefix-cls: ~'@{ant-prefix}-carousel';
|
||||
|
||||
.@{carousel-prefix-cls} {
|
||||
.reset-component;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.slick-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
@ -53,11 +50,6 @@
|
||||
left: 0;
|
||||
display: block;
|
||||
|
||||
.@{carousel-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: table;
|
||||
@ -144,15 +136,6 @@
|
||||
&::before {
|
||||
content: '←';
|
||||
}
|
||||
|
||||
.@{carousel-prefix-cls}-rtl & {
|
||||
right: -25px;
|
||||
left: auto;
|
||||
|
||||
&::before {
|
||||
content: '→';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
@ -160,14 +143,6 @@
|
||||
&::before {
|
||||
content: '→';
|
||||
}
|
||||
|
||||
.@{carousel-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: -25px;
|
||||
&::before {
|
||||
content: '←';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dots
|
||||
@ -184,10 +159,6 @@
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
|
||||
.@{carousel-prefix-cls}-rtl& {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
bottom: 12px;
|
||||
}
|
||||
@ -253,10 +224,6 @@
|
||||
margin: 0;
|
||||
transform: translateY(-50%);
|
||||
|
||||
.@{carousel-prefix-cls}-rtl& {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&-left {
|
||||
right: auto;
|
||||
left: 12px;
|
||||
|
||||
52
components/carousel/style/rtl.less
Normal file
52
components/carousel/style/rtl.less
Normal file
@ -0,0 +1,52 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@carousel-prefix-cls: ~'@{ant-prefix}-carousel';
|
||||
|
||||
.@{carousel-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.slick-track {
|
||||
.@{carousel-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
.@{carousel-prefix-cls}-rtl & {
|
||||
right: -25px;
|
||||
left: auto;
|
||||
&::before {
|
||||
content: '→';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
.@{carousel-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: -25px;
|
||||
&::before {
|
||||
content: '←';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dots
|
||||
.slick-dots {
|
||||
.@{carousel-prefix-cls}-rtl& {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-carousel-vertical {
|
||||
.slick-dots {
|
||||
.@{carousel-prefix-cls}-rtl& {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -230,3 +230,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl';
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
import './rtl.less';
|
||||
|
||||
// style dependencies
|
||||
import '../../empty/style';
|
||||
|
||||
@ -40,7 +40,6 @@ export default class Collapse extends React.Component<CollapseProps, any> {
|
||||
|
||||
static defaultProps = {
|
||||
bordered: true,
|
||||
openAnimation: { ...animation, appear() {} },
|
||||
expandIconPosition: 'left',
|
||||
};
|
||||
|
||||
@ -75,8 +74,11 @@ export default class Collapse extends React.Component<CollapseProps, any> {
|
||||
},
|
||||
className,
|
||||
);
|
||||
const openAnimation = { ...animation, appear() {} };
|
||||
|
||||
return (
|
||||
<RcCollapse
|
||||
openAnimation={openAnimation}
|
||||
{...this.props}
|
||||
expandIcon={(panelProps: PanelProps) => this.renderExpandIcon(panelProps, prefixCls)}
|
||||
prefixCls={prefixCls}
|
||||
|
||||
@ -1,5 +1,54 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Collapse could override default openAnimation 1`] = `
|
||||
<div
|
||||
class="ant-collapse ant-collapse-icon-position-left"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-item ant-collapse-item-active"
|
||||
>
|
||||
<div
|
||||
aria-expanded="true"
|
||||
class="ant-collapse-header"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-label="right"
|
||||
class="anticon anticon-right ant-collapse-arrow"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="right"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
style="transform: rotate(90deg);"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
This is panel header 1
|
||||
</div>
|
||||
<div
|
||||
class="ant-collapse-content ant-collapse-content-active"
|
||||
>
|
||||
<div
|
||||
class="ant-collapse-content-box"
|
||||
>
|
||||
content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Collapse rtl render component should be rendered correctly in RTL direction 1`] = `
|
||||
<div
|
||||
class="ant-collapse ant-collapse-icon-position-left ant-collapse-rtl"
|
||||
|
||||
@ -74,4 +74,19 @@ describe('Collapse', () => {
|
||||
expect(wrapper.find('.ant-collapse-item').hasClass('ant-collapse-item-active')).toBe(true);
|
||||
jest.useRealTimers();
|
||||
});
|
||||
|
||||
it('could override default openAnimation', () => {
|
||||
const wrapper = mount(
|
||||
<Collapse openAnimation={{}}>
|
||||
<Collapse.Panel header="This is panel header 1" key="1">
|
||||
content
|
||||
</Collapse.Panel>
|
||||
</Collapse>,
|
||||
);
|
||||
wrapper
|
||||
.find('.ant-collapse-header')
|
||||
.at(0)
|
||||
.simulate('click');
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './rtl';
|
||||
|
||||
@collapse-prefix-cls: ~'@{ant-prefix}-collapse';
|
||||
|
||||
@ -11,10 +12,6 @@
|
||||
border-bottom: 0;
|
||||
border-radius: @collapse-panel-border-radius;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
& > &-item {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-base;
|
||||
|
||||
@ -35,11 +32,6 @@
|
||||
transition: all 0.3s;
|
||||
.clearfix;
|
||||
|
||||
.@{collapse-prefix-cls}-rtl & {
|
||||
padding: @collapse-header-padding;
|
||||
padding-right: @collapse-header-padding-extra;
|
||||
}
|
||||
|
||||
.@{collapse-prefix-cls}-arrow {
|
||||
.iconfont-mixin();
|
||||
|
||||
@ -52,19 +44,11 @@
|
||||
|
||||
& svg {
|
||||
transition: transform 0.24s;
|
||||
|
||||
.@{collapse-prefix-cls}-rtl& {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{collapse-prefix-cls}-extra {
|
||||
float: right;
|
||||
|
||||
.@{collapse-prefix-cls}-rtl& {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@ -75,11 +59,6 @@
|
||||
&.@{collapse-prefix-cls}-no-arrow {
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
padding-left: 12px;
|
||||
|
||||
.@{collapse-prefix-cls}-rtl& {
|
||||
padding-right: 12px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
42
components/collapse/style/rtl.less
Normal file
42
components/collapse/style/rtl.less
Normal file
@ -0,0 +1,42 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@collapse-prefix-cls: ~'@{ant-prefix}-collapse';
|
||||
|
||||
.@{collapse-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
& > &-item {
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
.@{collapse-prefix-cls}-rtl & {
|
||||
padding: @collapse-header-padding;
|
||||
padding-right: @collapse-header-padding-extra;
|
||||
}
|
||||
|
||||
.@{collapse-prefix-cls}-arrow {
|
||||
& svg {
|
||||
.@{collapse-prefix-cls}-rtl& {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{collapse-prefix-cls}-extra {
|
||||
.@{collapse-prefix-cls}-rtl& {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{collapse-prefix-cls}-no-arrow {
|
||||
> .@{collapse-prefix-cls}-header {
|
||||
.@{collapse-prefix-cls}-rtl& {
|
||||
padding-right: 12px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './rtl';
|
||||
|
||||
@comment-prefix-cls: ~'@{ant-prefix}-comment';
|
||||
|
||||
@ -7,10 +8,6 @@
|
||||
position: relative;
|
||||
background-color: @comment-bg;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
display: flex;
|
||||
padding: @comment-padding-base;
|
||||
@ -22,10 +19,6 @@
|
||||
margin-right: 12px;
|
||||
cursor: pointer;
|
||||
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@ -51,11 +44,6 @@
|
||||
padding-right: 8px;
|
||||
font-size: @comment-font-size-sm;
|
||||
line-height: 18px;
|
||||
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-name {
|
||||
@ -86,9 +74,6 @@
|
||||
margin-top: 12px;
|
||||
padding-left: 0;
|
||||
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
}
|
||||
> li {
|
||||
display: inline-block;
|
||||
color: @comment-action-color;
|
||||
@ -100,11 +85,6 @@
|
||||
transition: color 0.3s;
|
||||
user-select: none;
|
||||
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @comment-action-hover-color;
|
||||
}
|
||||
@ -114,10 +94,5 @@
|
||||
|
||||
&-nested {
|
||||
margin-left: @comment-nest-indent;
|
||||
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
margin-right: @comment-nest-indent;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
50
components/comment/style/rtl.less
Normal file
50
components/comment/style/rtl.less
Normal file
@ -0,0 +1,50 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@comment-prefix-cls: ~'@{ant-prefix}-comment';
|
||||
|
||||
.@{comment-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-avatar {
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
&-author {
|
||||
& > a,
|
||||
& > span {
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
}
|
||||
> li {
|
||||
> span {
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-nested {
|
||||
.@{comment-prefix-cls}-rtl & {
|
||||
margin-right: @comment-nest-indent;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1000,6 +1000,67 @@ exports[`renders ./components/date-picker/demo/disabled-date.md correctly 1`] =
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
class="ant-picker ant-picker-range"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input ant-picker-input-active"
|
||||
>
|
||||
<input
|
||||
placeholder="Start date"
|
||||
readonly=""
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-range-separator"
|
||||
>
|
||||
<span
|
||||
class="ant-picker-separator"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
placeholder="End date"
|
||||
readonly=""
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-active-bar"
|
||||
style="left:0;width:0;position:absolute"
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="calendar"
|
||||
class="anticon anticon-calendar"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker ant-picker-range"
|
||||
>
|
||||
@ -2142,6 +2203,70 @@ exports[`renders ./components/date-picker/demo/range-picker.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/select-in-range.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-picker ant-picker-range"
|
||||
>
|
||||
<div
|
||||
class="ant-picker-input ant-picker-input-active"
|
||||
>
|
||||
<input
|
||||
placeholder="Start date"
|
||||
readonly=""
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-range-separator"
|
||||
>
|
||||
<span
|
||||
class="ant-picker-separator"
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-input"
|
||||
>
|
||||
<input
|
||||
placeholder="End date"
|
||||
readonly=""
|
||||
size="12"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ant-picker-active-bar"
|
||||
style="left:0;width:0;position:absolute"
|
||||
/>
|
||||
<span
|
||||
class="ant-picker-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="calendar"
|
||||
class="anticon anticon-calendar"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="calendar"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/date-picker/demo/size.md correctly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
|
||||
@ -66,6 +66,7 @@ ReactDOM.render(
|
||||
<br />
|
||||
<DatePicker picker="month" disabledDate={disabledDate} />
|
||||
<br />
|
||||
<RangePicker disabledDate={disabledDate} />
|
||||
<RangePicker
|
||||
disabledDate={disabledDate}
|
||||
disabledTime={disabledRangeTime}
|
||||
|
||||
44
components/date-picker/demo/select-in-range.md
Normal file
44
components/date-picker/demo/select-in-range.md
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
order: 6.1
|
||||
title:
|
||||
zh-CN: 选择不超过七天的范围
|
||||
en-US: Select range dates in 7 days
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
这里举例如何用 `onCalendarChange` 和 `disabledDate` 来限制动态的日期区间选择。
|
||||
|
||||
## en-US
|
||||
|
||||
A example shows how to select a dynamic range by using `onCalendarChange` and `disabledDate`.
|
||||
|
||||
```jsx
|
||||
import React, { useState } from 'react';
|
||||
import { DatePicker } from 'antd';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const App = () => {
|
||||
const [dates, setDates] = useState([]);
|
||||
const disabledDate = current => {
|
||||
if (!dates || dates.length === 0) {
|
||||
return false;
|
||||
}
|
||||
const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
|
||||
const tooEarly = dates[1] && dates[1].diff(current, 'days') > 7;
|
||||
return tooEarly || tooLate;
|
||||
};
|
||||
|
||||
return (
|
||||
<RangePicker
|
||||
disabledDate={disabledDate}
|
||||
onCalendarChange={value => {
|
||||
setDates(value);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
```
|
||||
@ -63,7 +63,7 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
|
||||
| bordered | whether has border style | Boolean | true | |
|
||||
| suffixIcon | The custom suffix icon | ReactNode | - | |
|
||||
| style | to customize the style of the input box | object | {} | |
|
||||
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - | |
|
||||
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | |
|
||||
| onPanelChange | callback when picker panel mode is changed | function(value, mode) | - | |
|
||||
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
|
||||
|
||||
|
||||
@ -65,7 +65,7 @@ import 'moment/locale/zh-cn';
|
||||
| bordered | 是否有边框 | Boolean | true | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
||||
| style | 自定义输入框样式 | object | {} | |
|
||||
| onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 | |
|
||||
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | 无 | |
|
||||
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
|
||||
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@import '../../style/themes/default';
|
||||
@import '../../style/mixins/index';
|
||||
@import './rtl';
|
||||
|
||||
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
|
||||
|
||||
@ -8,10 +9,6 @@
|
||||
@descriptions-small-padding: 8px 16px;
|
||||
|
||||
.@{descriptions-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 20px;
|
||||
color: @heading-color;
|
||||
@ -52,10 +49,6 @@
|
||||
top: -0.5px;
|
||||
margin: 0 8px 0 2px;
|
||||
content: ' ';
|
||||
|
||||
.@{descriptions-prefix-cls}-rtl & {
|
||||
margin: 0 2px 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
18
components/descriptions/style/rtl.less
Normal file
18
components/descriptions/style/rtl.less
Normal file
@ -0,0 +1,18 @@
|
||||
@import '../../style/themes/default';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
|
||||
|
||||
.@{descriptions-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-item-label {
|
||||
&::after {
|
||||
.@{descriptions-prefix-cls}-rtl & {
|
||||
margin: 0 2px 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -15,10 +15,6 @@
|
||||
box-shadow @animation-duration-slow @ease-base-out;
|
||||
}
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-content-wrapper {
|
||||
position: absolute;
|
||||
}
|
||||
@ -179,11 +175,6 @@
|
||||
transition: color @animation-duration-slow;
|
||||
text-rendering: auto;
|
||||
|
||||
.@{drawer-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: @icon-color-hover;
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// deps-lint-skip: empty
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
import './rtl.less';
|
||||
|
||||
16
components/drawer/style/rtl.less
Normal file
16
components/drawer/style/rtl.less
Normal file
@ -0,0 +1,16 @@
|
||||
@import '../../style/themes/index';
|
||||
|
||||
@drawer-prefix-cls: ~'@{ant-prefix}-drawer';
|
||||
|
||||
.@{drawer-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-close {
|
||||
.@{drawer-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './rtl';
|
||||
|
||||
@empty-prefix-cls: ~'@{ant-prefix}-empty';
|
||||
@empty-img-prefix-cls: ~'@{ant-prefix}-empty-img';
|
||||
@ -10,10 +11,6 @@
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-image {
|
||||
height: 100px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
10
components/empty/style/rtl.less
Normal file
10
components/empty/style/rtl.less
Normal file
@ -0,0 +1,10 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@empty-prefix-cls: ~'@{ant-prefix}-empty';
|
||||
|
||||
.@{empty-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
@ -276,7 +276,7 @@ To
|
||||
|
||||
```jsx
|
||||
// antd v4
|
||||
<Form.Item name={['user', '0', 'firstname']} label="Firstname">
|
||||
<Form.Item name={['user', 0, 'firstname']} label="Firstname">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
@ -278,7 +278,7 @@ form.getFieldsError();
|
||||
|
||||
```jsx
|
||||
// antd v4
|
||||
<Form.Item name={['user', '0', 'firstname']} label="Firstname">
|
||||
<Form.Item name={['user', 0, 'firstname']} label="Firstname">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
@ -284,7 +284,6 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
|
||||
role="menu"
|
||||
style="line-height:64px"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
|
||||
@ -1293,7 +1292,6 @@ exports[`renders ./components/layout/demo/top.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
|
||||
role="menu"
|
||||
style="line-height:64px"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
|
||||
@ -1464,7 +1462,6 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
|
||||
role="menu"
|
||||
style="line-height:64px"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
|
||||
@ -1810,7 +1807,6 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
|
||||
<ul
|
||||
class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
|
||||
role="menu"
|
||||
style="line-height:64px"
|
||||
>
|
||||
<li
|
||||
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
|
||||
|
||||
@ -27,7 +27,6 @@ ReactDOM.render(
|
||||
theme="dark"
|
||||
mode="horizontal"
|
||||
defaultSelectedKeys={['2']}
|
||||
style={{ lineHeight: '64px' }}
|
||||
>
|
||||
<Menu.Item key="1">nav 1</Menu.Item>
|
||||
<Menu.Item key="2">nav 2</Menu.Item>
|
||||
|
||||
@ -28,7 +28,6 @@ ReactDOM.render(
|
||||
theme="dark"
|
||||
mode="horizontal"
|
||||
defaultSelectedKeys={['2']}
|
||||
style={{ lineHeight: '64px' }}
|
||||
>
|
||||
<Menu.Item key="1">nav 1</Menu.Item>
|
||||
<Menu.Item key="2">nav 2</Menu.Item>
|
||||
|
||||
@ -28,7 +28,6 @@ ReactDOM.render(
|
||||
theme="dark"
|
||||
mode="horizontal"
|
||||
defaultSelectedKeys={['2']}
|
||||
style={{ lineHeight: '64px' }}
|
||||
>
|
||||
<Menu.Item key="1">nav 1</Menu.Item>
|
||||
<Menu.Item key="2">nav 2</Menu.Item>
|
||||
|
||||
@ -32,7 +32,6 @@ ReactDOM.render(
|
||||
theme="dark"
|
||||
mode="horizontal"
|
||||
defaultSelectedKeys={['2']}
|
||||
style={{ lineHeight: '64px' }}
|
||||
>
|
||||
<Menu.Item key="1">nav 1</Menu.Item>
|
||||
<Menu.Item key="2">nav 2</Menu.Item>
|
||||
|
||||
@ -13,16 +13,6 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
|
||||
// fix for virtual scroll style attribute > (direction:ltr)
|
||||
.ReactVirtualized__List .@{list-prefix-cls}-item {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
&-pagination {
|
||||
margin-top: 24px;
|
||||
text-align: right;
|
||||
@ -31,10 +21,6 @@
|
||||
.@{ant-prefix}-pagination-options {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&-more {
|
||||
@ -82,11 +68,6 @@
|
||||
|
||||
&-avatar {
|
||||
margin-right: @list-item-meta-avatar-margin-right;
|
||||
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: @list-item-meta-avatar-margin-right;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
flex: 1 0;
|
||||
@ -117,11 +98,6 @@
|
||||
font-size: 0;
|
||||
list-style: none;
|
||||
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
margin-right: 48px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
& > li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -134,11 +110,6 @@
|
||||
}
|
||||
& > li:first-child {
|
||||
padding-left: 0;
|
||||
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
&-split {
|
||||
position: absolute;
|
||||
@ -148,11 +119,6 @@
|
||||
height: 14px;
|
||||
margin-top: -7px;
|
||||
background-color: @border-color-split;
|
||||
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -217,11 +183,6 @@
|
||||
|
||||
&-extra {
|
||||
margin-left: 40px;
|
||||
|
||||
.@{list-prefix-cls}-rtl& {
|
||||
margin-right: 40px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-meta {
|
||||
@ -239,19 +200,10 @@
|
||||
margin-top: @padding-md;
|
||||
margin-left: auto;
|
||||
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
> li {
|
||||
padding: 0 16px;
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -276,10 +228,6 @@
|
||||
.@{list-prefix-cls}-item-no-flex {
|
||||
.@{list-prefix-cls}-item-action {
|
||||
float: right;
|
||||
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -287,3 +235,4 @@
|
||||
|
||||
@import './bordered';
|
||||
@import './responsive';
|
||||
@import './rtl.less';
|
||||
|
||||
@ -3,11 +3,6 @@
|
||||
&-item {
|
||||
&-action {
|
||||
margin-left: 24px;
|
||||
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
margin-right: 24px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,11 +11,6 @@
|
||||
.@{list-prefix-cls}-item {
|
||||
&-extra {
|
||||
margin-left: 24px;
|
||||
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
margin-right: 24px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -32,11 +22,6 @@
|
||||
flex-wrap: wrap;
|
||||
&-action {
|
||||
margin-left: 12px;
|
||||
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
margin-right: 22px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -49,12 +34,9 @@
|
||||
}
|
||||
&-extra {
|
||||
margin: auto auto 16px;
|
||||
|
||||
// to override margins on rtl view
|
||||
.@{list-prefix-cls}-rtl& {
|
||||
margin: auto auto 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './responsive.rtl.less';
|
||||
|
||||
47
components/list/style/responsive.rtl.less
Normal file
47
components/list/style/responsive.rtl.less
Normal file
@ -0,0 +1,47 @@
|
||||
@media screen and (max-width: @screen-md) {
|
||||
.@{list-prefix-cls} {
|
||||
&-item {
|
||||
&-action {
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
margin-right: 24px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{list-prefix-cls}-vertical {
|
||||
.@{list-prefix-cls}-item {
|
||||
&-extra {
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
margin-right: 24px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: @screen-sm) {
|
||||
.@{list-prefix-cls} {
|
||||
&-item {
|
||||
&-action {
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
margin-right: 22px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{list-prefix-cls}-vertical {
|
||||
.@{list-prefix-cls}-item {
|
||||
&-extra {
|
||||
// to override margins on rtl view
|
||||
.@{list-prefix-cls}-rtl& {
|
||||
margin: auto auto 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
90
components/list/style/rtl.less
Normal file
90
components/list/style/rtl.less
Normal file
@ -0,0 +1,90 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './customize.less';
|
||||
|
||||
@list-prefix-cls: ~'@{ant-prefix}-list';
|
||||
|
||||
.@{list-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
|
||||
// fix for virtual scroll style attribute > (direction:ltr)
|
||||
.ReactVirtualized__List .@{list-prefix-cls}-item {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
&-pagination {
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
&-meta {
|
||||
&-avatar {
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: @list-item-meta-avatar-margin-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-action {
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
margin-right: 48px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
& > li:first-child {
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-split {
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-vertical &-item {
|
||||
&-extra {
|
||||
.@{list-prefix-cls}-rtl& {
|
||||
margin-right: 40px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-action {
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
> li {
|
||||
&:first-child {
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal
|
||||
&:not(.@{list-prefix-cls}-vertical) {
|
||||
.@{list-prefix-cls}-item-no-flex {
|
||||
.@{list-prefix-cls}-item-action {
|
||||
.@{list-prefix-cls}-rtl & {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -550,4 +550,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Integration with header element so menu items have the same height
|
||||
.@{ant-prefix}-layout-header {
|
||||
.@{menu-prefix-cls} {
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@import './dark';
|
||||
|
||||
@ -3,3 +3,5 @@ import './index.less';
|
||||
|
||||
// style dependencies
|
||||
import '../../button/style';
|
||||
|
||||
import './rtl.less';
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
@dialog-prefix-cls: ~'@{ant-prefix}-modal';
|
||||
@table-prefix-cls: ~'@{ant-prefix}-table';
|
||||
@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
|
||||
|
||||
.@{dialog-prefix-cls} {
|
||||
.reset-component;
|
||||
@ -22,10 +21,6 @@
|
||||
overflow: auto;
|
||||
outline: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
@ -63,11 +58,6 @@
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
right: initial;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&-x {
|
||||
display: block;
|
||||
width: 56px;
|
||||
@ -109,17 +99,9 @@
|
||||
border-top: @border-width-base @border-style-base @modal-footer-border-color-split;
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
text-align: left;
|
||||
}
|
||||
button + button {
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -166,10 +148,6 @@
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
|
||||
.@{dialog-wrap-rtl-cls}& {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
40
components/modal/style/rtl.less
Normal file
40
components/modal/style/rtl.less
Normal file
@ -0,0 +1,40 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@dialog-prefix-cls: ~'@{ant-prefix}-modal';
|
||||
@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
|
||||
|
||||
.@{dialog-prefix-cls} {
|
||||
&-wrap {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
&-close {
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
right: initial;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
text-align: left;
|
||||
}
|
||||
button + button {
|
||||
.@{dialog-wrap-rtl-cls} & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{dialog-prefix-cls}-centered {
|
||||
.@{dialog-prefix-cls} {
|
||||
.@{dialog-wrap-rtl-cls}& {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -647,32 +647,32 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
style="margin-right:16px"
|
||||
class="example-link"
|
||||
>
|
||||
<img
|
||||
alt="Quick Start"
|
||||
class="example-link-icon"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
|
||||
style="margin-right:8px"
|
||||
/>
|
||||
Quick Start
|
||||
</a>
|
||||
<a
|
||||
style="margin-right:16px"
|
||||
class="example-link"
|
||||
>
|
||||
<img
|
||||
alt=" Product Info"
|
||||
class="example-link-icon"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
|
||||
style="margin-right:8px"
|
||||
/>
|
||||
Product Info
|
||||
</a>
|
||||
<a
|
||||
style="margin-right:16px"
|
||||
class="example-link"
|
||||
>
|
||||
<img
|
||||
alt="Product Doc"
|
||||
class="example-link-icon"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
|
||||
style="margin-right:8px"
|
||||
/>
|
||||
Product Doc
|
||||
</a>
|
||||
|
||||
@ -75,18 +75,8 @@ const routes = [
|
||||
];
|
||||
|
||||
const IconLink = ({ src, text }) => (
|
||||
<a
|
||||
style={{
|
||||
marginRight: 16,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
style={{
|
||||
marginRight: 8,
|
||||
}}
|
||||
src={src}
|
||||
alt={text}
|
||||
/>
|
||||
<a className="example-link">
|
||||
<img className="example-link-icon" src={src} alt={text} />
|
||||
{text}
|
||||
</a>
|
||||
);
|
||||
@ -168,6 +158,23 @@ ReactDOM.render(
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#components-page-header-demo-content .example-link {
|
||||
margin-right: 16px;
|
||||
}
|
||||
#components-page-header-demo-content .example-link-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#components-page-header-demo-content .ant-page-header-rtl .example-link {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
#components-page-header-demo-content .ant-page-header-rtl .example-link-icon {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#components-page-header-demo-content .image {
|
||||
flex: 100%;
|
||||
|
||||
@ -22,11 +22,6 @@
|
||||
content: '';
|
||||
}
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
@ -99,11 +94,6 @@
|
||||
}
|
||||
&-title {
|
||||
padding-left: @font-size-base + 8px;
|
||||
|
||||
.@{popover-prefix-cls}-rtl & {
|
||||
padding-right: @font-size-base + 8px;
|
||||
padding-left: @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -111,17 +101,8 @@
|
||||
margin-bottom: 4px;
|
||||
text-align: right;
|
||||
|
||||
.@{popover-prefix-cls}-rtl & {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 8px;
|
||||
|
||||
.@{popover-prefix-cls}-rtl & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -223,3 +204,5 @@
|
||||
bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl.less';
|
||||
|
||||
33
components/popover/style/rtl.less
Normal file
33
components/popover/style/rtl.less
Normal file
@ -0,0 +1,33 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@popover-prefix-cls: ~'@{ant-prefix}-popover';
|
||||
|
||||
.@{popover-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&-message {
|
||||
&-title {
|
||||
.@{popover-prefix-cls}-rtl & {
|
||||
padding-right: @font-size-base + 8px;
|
||||
padding-left: @padding-md;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
.@{popover-prefix-cls}-rtl & {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
button {
|
||||
.@{popover-prefix-cls}-rtl & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8,10 +8,6 @@
|
||||
|
||||
display: inline-block;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-line {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -46,13 +42,6 @@
|
||||
.@{progress-prefix-cls}-show-info & {
|
||||
margin-right: ~'calc(-2em - 8px)';
|
||||
padding-right: ~'calc(2em + 8px)';
|
||||
|
||||
.@{progress-prefix-cls}-rtl& {
|
||||
margin-right: 0;
|
||||
margin-left: ~'calc(-2em - 8px)';
|
||||
padding-right: 0;
|
||||
padding-left: ~'calc(2em + 8px)';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -93,11 +82,6 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: @success-color;
|
||||
|
||||
.@{progress-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
@ -114,12 +98,6 @@
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
.@{progress-prefix-cls}-rtl & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&-status-active {
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
import './rtl.less';
|
||||
|
||||
36
components/progress/style/rtl.less
Normal file
36
components/progress/style/rtl.less
Normal file
@ -0,0 +1,36 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@progress-prefix-cls: ~'@{ant-prefix}-progress';
|
||||
|
||||
.@{progress-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-outer {
|
||||
.@{progress-prefix-cls}-show-info & {
|
||||
.@{progress-prefix-cls}-rtl& {
|
||||
margin-right: 0;
|
||||
margin-left: ~'calc(-2em - 8px)';
|
||||
padding-right: 0;
|
||||
padding-left: ~'calc(2em + 8px)';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-success-bg {
|
||||
.@{progress-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-text {
|
||||
.@{progress-prefix-cls}-rtl & {
|
||||
margin-right: 8px;
|
||||
margin-left: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -22,10 +22,6 @@
|
||||
color: @warning-color;
|
||||
}
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
// Exception Status image
|
||||
&-image {
|
||||
width: 250px;
|
||||
@ -62,16 +58,8 @@
|
||||
> * {
|
||||
margin-right: 8px;
|
||||
|
||||
.@{result-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
.@{result-prefix-cls}-rtl & {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
import './rtl.less';
|
||||
|
||||
25
components/result/style/rtl.less
Normal file
25
components/result/style/rtl.less
Normal file
@ -0,0 +1,25 @@
|
||||
@import '../../style/themes/default';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@result-prefix-cls: ~'@{ant-prefix}-result';
|
||||
|
||||
.@{result-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-extra {
|
||||
> * {
|
||||
.@{result-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.@{result-prefix-cls}-rtl & {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4,6 +4,7 @@
|
||||
|
||||
@import './single';
|
||||
@import './multiple';
|
||||
@import './rtl';
|
||||
|
||||
@select-prefix-cls: ~'@{ant-prefix}-select';
|
||||
@select-height-without-border: @input-height-base - 2 * @border-width-base;
|
||||
@ -60,10 +61,6 @@
|
||||
.hover();
|
||||
}
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
// ======================== Selection ========================
|
||||
&-selection-item {
|
||||
flex: 1;
|
||||
@ -110,11 +107,6 @@
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-rtl & {
|
||||
right: initial;
|
||||
left: @control-padding-horizontal - 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================== Clear ==========================
|
||||
@ -148,20 +140,11 @@
|
||||
.@{select-prefix-cls}:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-rtl & {
|
||||
right: initial;
|
||||
left: @control-padding-horizontal - 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================== Popup ==========================
|
||||
&-dropdown {
|
||||
.reset-component;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import './index';
|
||||
@import './multiple.rtl.less';
|
||||
|
||||
@select-multiple-item-border-width: 1px;
|
||||
@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px
|
||||
@ -65,11 +66,6 @@
|
||||
transition: font-size 0.3s, line-height 0.3s, height 0.3s;
|
||||
user-select: none;
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
margin-right: 0;
|
||||
margin-left: @input-padding-vertical-base;
|
||||
text-align: right;
|
||||
}
|
||||
// It's ok not to do this, but 24px makes bottom narrow in view should adjust
|
||||
&-content {
|
||||
display: inline-block;
|
||||
@ -77,12 +73,6 @@
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
margin-right: 0;
|
||||
margin-left: @padding-xs / 2;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&-remove {
|
||||
@ -106,11 +96,6 @@
|
||||
position: relative;
|
||||
margin-left: @select-multiple-padding / 2;
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
margin-right: @select-multiple-padding / 2;
|
||||
margin-left: @input-padding-vertical-base;
|
||||
}
|
||||
|
||||
&-input,
|
||||
&-mirror {
|
||||
font-family: @font-family;
|
||||
@ -129,11 +114,6 @@
|
||||
z-index: 999;
|
||||
white-space: nowrap;
|
||||
visibility: hidden;
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -145,11 +125,6 @@
|
||||
left: @input-padding-horizontal;
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.3s;
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
right: @input-padding-horizontal;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
@ -189,10 +164,6 @@
|
||||
&.@{select-prefix-cls}-sm {
|
||||
.@{select-prefix-cls}-selection-placeholder {
|
||||
left: @input-padding-horizontal-sm;
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
right: @input-padding-horizontal-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
69
components/select/style/multiple.rtl.less
Normal file
69
components/select/style/multiple.rtl.less
Normal file
@ -0,0 +1,69 @@
|
||||
@import './index';
|
||||
|
||||
@select-multiple-item-border-width: 1px;
|
||||
@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2);
|
||||
@select-multiple-padding: max(
|
||||
@input-padding-vertical-base - @select-multiple-item-border-width -
|
||||
@select-multiple-item-spacing-half,
|
||||
0
|
||||
);
|
||||
|
||||
/**
|
||||
* Do not merge `height` & `line-height` under style with `selection` & `search`,
|
||||
* since chrome may update to redesign with its align logic.
|
||||
*/
|
||||
|
||||
.@{select-prefix-cls}-multiple {
|
||||
// ======================== Selections ========================
|
||||
.@{select-prefix-cls}-selection-item {
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
margin-right: 0;
|
||||
margin-left: @input-padding-vertical-base;
|
||||
text-align: right;
|
||||
}
|
||||
// It's ok not to do this, but 24px makes bottom narrow in view should adjust
|
||||
&-content {
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
margin-right: 0;
|
||||
margin-left: @padding-xs / 2;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ========================== Input ==========================
|
||||
.@{select-prefix-cls}-selection-search {
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
margin-right: @select-multiple-padding / 2;
|
||||
margin-left: @input-padding-vertical-base;
|
||||
}
|
||||
|
||||
&-mirror {
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================= Placeholder =======================
|
||||
.@{select-prefix-cls}-selection-placeholder {
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
right: @input-padding-horizontal;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// == Size ==
|
||||
// ============================================================
|
||||
|
||||
// Size small need additional set padding
|
||||
&.@{select-prefix-cls}-sm {
|
||||
.@{select-prefix-cls}-selection-placeholder {
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
right: @input-padding-horizontal-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
34
components/select/style/rtl.less
Normal file
34
components/select/style/rtl.less
Normal file
@ -0,0 +1,34 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../input/style/mixin';
|
||||
|
||||
@select-prefix-cls: ~'@{ant-prefix}-select';
|
||||
|
||||
.@{select-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
// ========================== Arrow ==========================
|
||||
&-arrow {
|
||||
.@{select-prefix-cls}-rtl & {
|
||||
right: initial;
|
||||
left: @control-padding-horizontal - 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================== Clear ==========================
|
||||
&-clear {
|
||||
.@{select-prefix-cls}-rtl & {
|
||||
right: initial;
|
||||
left: @control-padding-horizontal - 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================== Popup ==========================
|
||||
&-dropdown {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
@import './index';
|
||||
@import './single.rtl.less';
|
||||
|
||||
@selection-item-padding: ceil(@font-size-base * 1.25);
|
||||
|
||||
@ -32,11 +33,6 @@
|
||||
line-height: @select-height-without-border;
|
||||
}
|
||||
}
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
right: 0;
|
||||
left: 9px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// For common baseline align
|
||||
@ -55,21 +51,11 @@
|
||||
// With arrow should provides `padding-right` to show the arrow
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
|
||||
right: @input-padding-horizontal-base + @font-size-base;
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
right: @input-padding-horizontal-base;
|
||||
left: @input-padding-horizontal-base + @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
|
||||
padding-right: @selection-item-padding;
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
padding-right: 0;
|
||||
padding-left: @selection-item-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// Opacity selection if open
|
||||
@ -90,9 +76,6 @@
|
||||
height: @input-height-base;
|
||||
padding: 0 @input-padding-horizontal-base;
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
padding: 0 @input-padding-horizontal-base;
|
||||
}
|
||||
.@{select-prefix-cls}-selection-search-input {
|
||||
height: @select-height-without-border;
|
||||
}
|
||||
@ -166,20 +149,11 @@
|
||||
// With arrow should provides `padding-right` to show the arrow
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
|
||||
right: @input-padding-horizontal-sm + @font-size-base * 1.5;
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
|
||||
padding-right: @font-size-base * 1.5;
|
||||
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
padding-right: 0;
|
||||
padding-left: @font-size-base * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
69
components/select/style/single.rtl.less
Normal file
69
components/select/style/single.rtl.less
Normal file
@ -0,0 +1,69 @@
|
||||
@import './index';
|
||||
|
||||
@selection-item-padding: ceil(@font-size-base * 1.25);
|
||||
|
||||
.@{select-prefix-cls}-single {
|
||||
// ========================= Selector =========================
|
||||
.@{select-prefix-cls}-selector {
|
||||
.@{select-prefix-cls}-selection-item,
|
||||
.@{select-prefix-cls}-selection-placeholder {
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
right: 0;
|
||||
left: 9px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// With arrow should provides `padding-right` to show the arrow
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
right: @input-padding-horizontal-base;
|
||||
left: @input-padding-horizontal-base + @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
padding-right: 0;
|
||||
padding-left: @selection-item-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================== Input ==========================
|
||||
// We only change the style of non-customize input which is only support by `combobox` mode.
|
||||
|
||||
// Not customize
|
||||
&:not(.@{select-prefix-cls}-customize-input) {
|
||||
.@{select-prefix-cls}-selector {
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
padding: 0 @input-padding-horizontal-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// == Size ==
|
||||
// ============================================================
|
||||
|
||||
// Size small need additional set padding
|
||||
&.@{select-prefix-cls}-sm {
|
||||
&:not(.@{select-prefix-cls}-customize-input) {
|
||||
// With arrow should provides `padding-right` to show the arrow
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
|
||||
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
|
||||
.@{select-prefix-cls}-rtl& {
|
||||
padding-right: 0;
|
||||
padding-left: @font-size-base * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -6,10 +6,6 @@
|
||||
.@{statistic-prefix-cls} {
|
||||
.reset-component;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-bottom: 4px;
|
||||
color: @text-color-secondary;
|
||||
@ -34,21 +30,13 @@
|
||||
|
||||
&-prefix {
|
||||
margin-right: 4px;
|
||||
|
||||
.@{statistic-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-suffix {
|
||||
margin-left: 4px;
|
||||
font-size: @statistic-unit-font-size;
|
||||
|
||||
.@{statistic-prefix-cls}-rtl & {
|
||||
margin-right: 4px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl.less';
|
||||
|
||||
26
components/statistic/style/rtl.less
Normal file
26
components/statistic/style/rtl.less
Normal file
@ -0,0 +1,26 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@statistic-prefix-cls: ~'@{ant-prefix}-statistic';
|
||||
|
||||
.@{statistic-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-content {
|
||||
&-prefix {
|
||||
.@{statistic-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-suffix {
|
||||
.@{statistic-prefix-cls}-rtl & {
|
||||
margin-right: 4px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1217,4 +1217,14 @@ describe('Table.filter', () => {
|
||||
|
||||
expect(wrapper.find('.ant-table-filter-trigger').hasClass('active')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('with onFilter', () => {
|
||||
const onFilter = jest.fn((value, record) => record.key === value);
|
||||
const columns = [{ dataIndex: 'key', filteredValue: [5], onFilter }];
|
||||
const testData = [{ key: 1 }, { key: 3 }, { key: 5 }];
|
||||
const wrapper = mount(<Table columns={columns} dataSource={testData} />);
|
||||
|
||||
expect(onFilter).toHaveBeenCalled();
|
||||
expect(wrapper.find('tbody tr')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
@ -24,10 +24,12 @@ function renderFilterItems(
|
||||
multiple: boolean,
|
||||
) {
|
||||
return filters.map((filter, index) => {
|
||||
const key = String(filter.value);
|
||||
|
||||
if (filter.children) {
|
||||
return (
|
||||
<SubMenu
|
||||
key={filter.value || index}
|
||||
key={key || index}
|
||||
title={filter.text}
|
||||
popupClassName={`${prefixCls}-dropdown-submenu`}
|
||||
>
|
||||
@ -39,8 +41,8 @@ function renderFilterItems(
|
||||
const Component = multiple ? Checkbox : Radio;
|
||||
|
||||
return (
|
||||
<MenuItem key={filter.value !== undefined ? filter.value : index}>
|
||||
<Component checked={filteredKeys.includes(String(filter.value))} />
|
||||
<MenuItem key={filter.value !== undefined ? key : index}>
|
||||
<Component checked={filteredKeys.includes(key)} />
|
||||
<span>{filter.text}</span>
|
||||
</MenuItem>
|
||||
);
|
||||
@ -189,7 +191,12 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
|
||||
openKeys={openKeys}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
{renderFilterItems(column.filters || [], prefixCls, getFilteredKeysSync(), filterMultiple)}
|
||||
{renderFilterItems(
|
||||
column.filters || [],
|
||||
prefixCls,
|
||||
getFilteredKeysSync(),
|
||||
filterMultiple,
|
||||
)}
|
||||
</Menu>
|
||||
<div className={`${prefixCls}-dropdown-btns`}>
|
||||
<Button type="link" size="small" disabled={selectedKeys.length === 0} onClick={onReset}>
|
||||
|
||||
@ -31,7 +31,7 @@ function collectFilterStates<RecordType>(
|
||||
|
||||
if ('children' in column) {
|
||||
filterStates = [...filterStates, ...collectFilterStates(column.children, init, columnPos)];
|
||||
} else if ('filters' in column || 'filterDropdown' in column) {
|
||||
} else if ('filters' in column || 'filterDropdown' in column || 'onFilter' in column) {
|
||||
if ('filteredValue' in column) {
|
||||
// Controlled
|
||||
filterStates.push({
|
||||
@ -125,7 +125,7 @@ function generateFilterInfo<RecordType>(filterStates: FilterState<RecordType>[])
|
||||
}
|
||||
|
||||
function flattenKeys(filters?: ColumnFilterItem[]) {
|
||||
let keys: Key[] = [];
|
||||
let keys: (string | number | boolean)[] = [];
|
||||
(filters || []).forEach(({ value, children }) => {
|
||||
keys.push(value);
|
||||
if (children) {
|
||||
|
||||
@ -39,7 +39,7 @@ export type CompareFn<T> = (a: T, b: T, sortOrder?: SortOrder) => number;
|
||||
|
||||
export interface ColumnFilterItem {
|
||||
text: React.ReactNode;
|
||||
value: string;
|
||||
value: string | number | boolean;
|
||||
children?: ColumnFilterItem[];
|
||||
}
|
||||
|
||||
@ -92,7 +92,7 @@ export interface ColumnType<RecordType> extends RcColumnType<RecordType> {
|
||||
filteredValue?: Key[] | null;
|
||||
defaultFilteredValue?: Key[] | null;
|
||||
filterIcon?: React.ReactNode | ((filtered: boolean) => React.ReactNode);
|
||||
onFilter?: (value: any, record: RecordType) => boolean;
|
||||
onFilter?: (value: string | number | boolean, record: RecordType) => boolean;
|
||||
filterDropdownVisible?: boolean;
|
||||
onFilterDropdownVisibleChange?: (visible: boolean) => void;
|
||||
}
|
||||
|
||||
@ -58,17 +58,10 @@
|
||||
// Fixed first or last should special process
|
||||
&.@{table-prefix-cls}-cell-fix-left-last,
|
||||
&.@{table-prefix-cls}-cell-fix-right-first {
|
||||
display: flex;
|
||||
overflow: visible;
|
||||
|
||||
> .@{table-prefix-cls}-row-indent,
|
||||
> .@{table-prefix-cls}-row-expand-icon {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-cell-content {
|
||||
display: block;
|
||||
flex: auto;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@ -427,14 +420,25 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-row-indent {
|
||||
float: left;
|
||||
height: 1px;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&-row-expand-icon {
|
||||
.operation-unit();
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
|
||||
width: ceil(@font-size-sm * 1.4);
|
||||
height: ceil(@font-size-sm * 1.4);
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
line-height: @font-size-sm;
|
||||
vertical-align: floor((@font-size-base - ceil(@font-size-sm * 1.4)) / 2);
|
||||
@ -445,6 +449,10 @@
|
||||
transition: all 0.3s;
|
||||
user-select: none;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
@ -493,6 +501,7 @@
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-row-indent + & {
|
||||
margin-top: (@font-size-base * @line-height-base - ceil(@font-size-sm * 1.4)) / 2;
|
||||
margin-right: @padding-xs;
|
||||
|
||||
.@{table-wrapepr-rtl-cls} & {
|
||||
|
||||
@ -57,11 +57,6 @@
|
||||
&:hover {
|
||||
color: @heading-color;
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls}-rtl& {
|
||||
margin-right: 3px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
&&-card &-card-content > &-tabpane,
|
||||
@ -80,10 +75,6 @@
|
||||
line-height: @tabs-title-font-size * @line-height-base + extract(@tabs-horizontal-padding, 1) *
|
||||
2;
|
||||
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls}-new-tab {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
@ -193,3 +184,5 @@
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@import './card-style.rtl.less';
|
||||
|
||||
20
components/tabs/style/card-style.rtl.less
Normal file
20
components/tabs/style/card-style.rtl.less
Normal file
@ -0,0 +1,20 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
|
||||
// card style
|
||||
.@{tab-prefix-cls} {
|
||||
&&-card &-card-bar &-tab &-close-x {
|
||||
.@{tab-prefix-cls}-rtl& {
|
||||
margin-right: 3px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-extra-content {
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
float: left !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -23,10 +23,6 @@
|
||||
overflow: hidden;
|
||||
.clearfix;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-ink-bar {
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
@ -37,11 +33,6 @@
|
||||
height: 2px;
|
||||
background-color: @tabs-ink-bar-color;
|
||||
transform-origin: 0 0;
|
||||
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-bar {
|
||||
@ -125,11 +116,6 @@
|
||||
text-transform: none;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&-target {
|
||||
display: block;
|
||||
.iconfont-size-under-12px(10px);
|
||||
@ -147,21 +133,11 @@
|
||||
|
||||
&-tab-next {
|
||||
right: 2px;
|
||||
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&-tab-prev {
|
||||
left: 0;
|
||||
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
right: 2px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
:root & {
|
||||
filter: none;
|
||||
}
|
||||
@ -207,10 +183,6 @@
|
||||
cursor: pointer;
|
||||
transition: color 0.3s @ease-in-out;
|
||||
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
margin: @tabs-horizontal-margin-rtl;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
@ -237,11 +209,6 @@
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
margin-right: 8px;
|
||||
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-active {
|
||||
@ -469,3 +436,5 @@
|
||||
.@{tab-prefix-cls}-right-content {
|
||||
.tabs-no-animation();
|
||||
}
|
||||
|
||||
@import './rtl.less';
|
||||
|
||||
57
components/tabs/style/rtl.less
Normal file
57
components/tabs/style/rtl.less
Normal file
@ -0,0 +1,57 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './card-style';
|
||||
|
||||
@tab-prefix-cls: ~'@{ant-prefix}-tabs';
|
||||
|
||||
.@{tab-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-ink-bar {
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-tab-prev,
|
||||
&-tab-next {
|
||||
&-icon {
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-tab-next {
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&-tab-prev {
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
right: 2px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-nav {
|
||||
.@{tab-prefix-cls}-tab {
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
margin: @tabs-horizontal-margin-rtl;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
.@{tab-prefix-cls}-rtl & {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -36,13 +36,6 @@
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
&-rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
.iconfont-size-under-12px(10px);
|
||||
|
||||
@ -52,11 +45,6 @@
|
||||
cursor: pointer;
|
||||
transition: all 0.3s @ease-in-out-circ;
|
||||
|
||||
.@{tag-prefix-cls}-rtl& {
|
||||
margin-right: 3px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @heading-color;
|
||||
}
|
||||
@ -132,3 +120,5 @@
|
||||
.make-status-color-classes('red', error);
|
||||
.make-status-color-classes('orange', warning);
|
||||
}
|
||||
|
||||
@import './rtl.less';
|
||||
|
||||
20
components/tag/style/rtl.less
Normal file
20
components/tag/style/rtl.less
Normal file
@ -0,0 +1,20 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@tag-prefix-cls: ~'@{ant-prefix}-tag';
|
||||
|
||||
.@{tag-prefix-cls} {
|
||||
&-rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
.@{tag-prefix-cls}-rtl& {
|
||||
margin-right: 3px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -10,10 +10,6 @@
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
@ -27,13 +23,6 @@
|
||||
left: 4px;
|
||||
height: calc(100% - 10px);
|
||||
border-left: @timeline-width solid @timeline-color;
|
||||
|
||||
.@{timeline-prefix-cls}-rtl & {
|
||||
right: 4px;
|
||||
left: auto;
|
||||
border-right: @timeline-width solid @timeline-color;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-pending &-head {
|
||||
@ -87,12 +76,6 @@
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.@{timeline-prefix-cls}-rtl & {
|
||||
right: 5px;
|
||||
left: auto;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
@ -100,10 +83,6 @@
|
||||
top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
|
||||
margin: 0 0 0 18px;
|
||||
word-break: break-word;
|
||||
|
||||
.@{timeline-prefix-cls}-rtl & {
|
||||
margin: 0 18px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-last {
|
||||
@ -124,27 +103,13 @@
|
||||
&-head,
|
||||
&-head-custom {
|
||||
left: 50%;
|
||||
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-head {
|
||||
margin-left: -4px;
|
||||
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
margin-right: -4px;
|
||||
margin-left: 0;
|
||||
}
|
||||
&-custom {
|
||||
margin-left: 1px;
|
||||
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
margin-right: 1px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,12 +118,6 @@
|
||||
left: calc(50% - 4px);
|
||||
width: calc(50% - 14px);
|
||||
text-align: left;
|
||||
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
right: calc(50% - 4px);
|
||||
left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -167,10 +126,6 @@
|
||||
width: calc(50% - 12px);
|
||||
margin: 0;
|
||||
text-align: right;
|
||||
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -183,20 +138,9 @@
|
||||
.@{timeline-prefix-cls}-item-head-custom {
|
||||
// stylelint-disable-next-line function-calc-no-invalid
|
||||
left: calc(100% - 4px - @timeline-width);
|
||||
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
.@{timeline-prefix-cls}-item-content {
|
||||
width: calc(100% - 18px);
|
||||
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
width: 100%;
|
||||
margin-right: 18px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -205,11 +149,6 @@
|
||||
display: block;
|
||||
height: calc(100% - 14px);
|
||||
border-left: 2px dotted @timeline-color;
|
||||
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
border-right: 2px dotted @timeline-color;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
&&-reverse &-item-last &-item-tail {
|
||||
@ -222,11 +161,6 @@
|
||||
display: block;
|
||||
height: calc(100% - 15px);
|
||||
border-left: 2px dotted @timeline-color;
|
||||
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
border-right: 2px dotted @timeline-color;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
.@{timeline-prefix-cls}-item-content {
|
||||
min-height: 48px;
|
||||
@ -248,3 +182,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl.less';
|
||||
|
||||
119
components/timeline/style/rtl.less
Normal file
119
components/timeline/style/rtl.less
Normal file
@ -0,0 +1,119 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@timeline-prefix-cls: ~'@{ant-prefix}-timeline';
|
||||
|
||||
.@{timeline-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-item {
|
||||
&-tail {
|
||||
.@{timeline-prefix-cls}-rtl & {
|
||||
right: 4px;
|
||||
left: auto;
|
||||
border-right: @timeline-width solid @timeline-color;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-head-custom {
|
||||
.@{timeline-prefix-cls}-rtl & {
|
||||
right: 5px;
|
||||
left: auto;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
.@{timeline-prefix-cls}-rtl & {
|
||||
margin: 0 18px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{timeline-prefix-cls}-alternate,
|
||||
&.@{timeline-prefix-cls}-right,
|
||||
&.@{timeline-prefix-cls}-label {
|
||||
.@{timeline-prefix-cls}-item {
|
||||
&-tail,
|
||||
&-head,
|
||||
&-head-custom {
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-head {
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
margin-right: -4px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&-custom {
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
margin-right: 1px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
.@{timeline-prefix-cls}-item-content {
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
right: calc(50% - 4px);
|
||||
left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
.@{timeline-prefix-cls}-item-content {
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.@{timeline-prefix-cls}-right {
|
||||
.@{timeline-prefix-cls}-item-right {
|
||||
.@{timeline-prefix-cls}-item-tail,
|
||||
.@{timeline-prefix-cls}-item-head,
|
||||
.@{timeline-prefix-cls}-item-head-custom {
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.@{timeline-prefix-cls}-item-content {
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
width: 100%;
|
||||
margin-right: 18px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&&-pending &-item-last &-item-tail {
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
border-right: 2px dotted @timeline-color;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
&&-reverse &-item-pending {
|
||||
.@{timeline-prefix-cls}-item-tail {
|
||||
.@{timeline-prefix-cls}-rtl& {
|
||||
border-right: 2px dotted @timeline-color;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -21,10 +21,6 @@
|
||||
max-width: @tooltip-max-width;
|
||||
visibility: visible;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
@ -65,10 +61,6 @@
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: @box-shadow-base;
|
||||
|
||||
.@{tooltip-prefix-cls}-rtl & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Arrows
|
||||
@ -193,3 +185,5 @@
|
||||
right: @tooltip-arrow-offset-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
@import './rtl.less';
|
||||
|
||||
14
components/tooltip/style/rtl.less
Normal file
14
components/tooltip/style/rtl.less
Normal file
@ -0,0 +1,14 @@
|
||||
@tooltip-prefix-cls: ~'@{ant-prefix}-tooltip';
|
||||
|
||||
// Base class
|
||||
.@{tooltip-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
// Wrapper for the tooltip content
|
||||
&-inner {
|
||||
.@{tooltip-prefix-cls}-rtl & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -951,7 +951,7 @@ exports[`Transfer should support render value and label in item 1`] = `
|
||||
type="button"
|
||||
>
|
||||
<ForwardRef(RightOutlined)>
|
||||
<ForwardRef(AntdIcon)
|
||||
<AntdIcon
|
||||
icon={
|
||||
Object {
|
||||
"icon": Object {
|
||||
@ -1021,7 +1021,7 @@ exports[`Transfer should support render value and label in item 1`] = `
|
||||
</svg>
|
||||
</IconReact>
|
||||
</span>
|
||||
</ForwardRef(AntdIcon)>
|
||||
</AntdIcon>
|
||||
</ForwardRef(RightOutlined)>
|
||||
</button>
|
||||
</Wave>
|
||||
@ -1045,7 +1045,7 @@ exports[`Transfer should support render value and label in item 1`] = `
|
||||
type="button"
|
||||
>
|
||||
<ForwardRef(LeftOutlined)>
|
||||
<ForwardRef(AntdIcon)
|
||||
<AntdIcon
|
||||
icon={
|
||||
Object {
|
||||
"icon": Object {
|
||||
@ -1115,7 +1115,7 @@ exports[`Transfer should support render value and label in item 1`] = `
|
||||
</svg>
|
||||
</IconReact>
|
||||
</span>
|
||||
</ForwardRef(AntdIcon)>
|
||||
</AntdIcon>
|
||||
</ForwardRef(LeftOutlined)>
|
||||
</button>
|
||||
</Wave>
|
||||
|
||||
@ -51,7 +51,7 @@ exports[`Transfer.Search should show cross icon when input value exists 1`] = `
|
||||
className="undefined-action"
|
||||
>
|
||||
<ForwardRef(SearchOutlined)>
|
||||
<ForwardRef(AntdIcon)
|
||||
<AntdIcon
|
||||
icon={
|
||||
Object {
|
||||
"icon": Object {
|
||||
@ -121,7 +121,7 @@ exports[`Transfer.Search should show cross icon when input value exists 1`] = `
|
||||
</svg>
|
||||
</IconReact>
|
||||
</span>
|
||||
</ForwardRef(AntdIcon)>
|
||||
</AntdIcon>
|
||||
</ForwardRef(SearchOutlined)>
|
||||
</span>
|
||||
</div>
|
||||
@ -181,7 +181,7 @@ exports[`Transfer.Search should show cross icon when input value exists 2`] = `
|
||||
onClick={[Function]}
|
||||
>
|
||||
<ForwardRef(CloseCircleFilled)>
|
||||
<ForwardRef(AntdIcon)
|
||||
<AntdIcon
|
||||
icon={
|
||||
Object {
|
||||
"icon": Object {
|
||||
@ -251,7 +251,7 @@ exports[`Transfer.Search should show cross icon when input value exists 2`] = `
|
||||
</svg>
|
||||
</IconReact>
|
||||
</span>
|
||||
</ForwardRef(AntdIcon)>
|
||||
</AntdIcon>
|
||||
</ForwardRef(CloseCircleFilled)>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../checkbox/style/mixin';
|
||||
@import './customize.less';
|
||||
@import './rtl.less';
|
||||
|
||||
@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
|
||||
@ -14,10 +15,6 @@
|
||||
|
||||
position: relative;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
.@{transfer-prefix-cls}-list {
|
||||
background: @transfer-disabled-bg;
|
||||
@ -51,11 +48,6 @@
|
||||
line-height: @input-height-base;
|
||||
text-align: center;
|
||||
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
color: @disabled-color;
|
||||
transition: all 0.3s;
|
||||
@ -83,27 +75,13 @@
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base @border-radius-base 0 0;
|
||||
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
&-title {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-checkbox-wrapper + span {
|
||||
padding-left: 8px;
|
||||
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
padding-right: 8px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -118,11 +96,6 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -145,18 +118,9 @@
|
||||
transition: all 0.3s;
|
||||
> span {
|
||||
padding-right: 0;
|
||||
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&-text {
|
||||
padding-left: 8px;
|
||||
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
padding-right: 8px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -197,11 +161,6 @@
|
||||
width: 100%;
|
||||
border-top: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: 0 0 @border-radius-base @border-radius-base;
|
||||
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
74
components/transfer/style/rtl.less
Normal file
74
components/transfer/style/rtl.less
Normal file
@ -0,0 +1,74 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../checkbox/style/mixin';
|
||||
|
||||
@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
|
||||
|
||||
.@{transfer-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-list {
|
||||
&-search {
|
||||
&-action {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
&-title {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: auto;
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-checkbox-wrapper + span {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
padding-right: 8px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
&-search-wrapper {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
&-item {
|
||||
> span {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
&-text {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
padding-right: 8px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
.@{transfer-prefix-cls}-rtl & {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -151,7 +151,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
|
||||
const { onSelect, multiple } = this.props;
|
||||
const { expandedKeys = [] } = this.state;
|
||||
const { node, nativeEvent } = event;
|
||||
const { eventKey = '' } = node.props;
|
||||
const { key = '' } = node;
|
||||
|
||||
const treeData = getTreeData(this.props);
|
||||
const newState: DirectoryTreeState = {};
|
||||
@ -171,7 +171,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
|
||||
if (multiple && ctrlPick) {
|
||||
// Control click
|
||||
newSelectedKeys = keys;
|
||||
this.lastSelectedKey = eventKey;
|
||||
this.lastSelectedKey = key;
|
||||
this.cachedSelectedKeys = newSelectedKeys;
|
||||
newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys);
|
||||
} else if (multiple && shiftPick) {
|
||||
@ -179,16 +179,16 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
|
||||
newSelectedKeys = Array.from(
|
||||
new Set([
|
||||
...(this.cachedSelectedKeys || []),
|
||||
...calcRangeKeys(treeData, expandedKeys, eventKey, this.lastSelectedKey),
|
||||
...calcRangeKeys(treeData, expandedKeys, key, this.lastSelectedKey),
|
||||
]),
|
||||
);
|
||||
newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys);
|
||||
} else {
|
||||
// Single click
|
||||
newSelectedKeys = [eventKey];
|
||||
this.lastSelectedKey = eventKey;
|
||||
newSelectedKeys = [key];
|
||||
this.lastSelectedKey = key;
|
||||
this.cachedSelectedKeys = newSelectedKeys;
|
||||
newEvent.selectedNodes = [event.node.props.data];
|
||||
newEvent.selectedNodes = convertDirectoryKeysToNodes(treeData, newSelectedKeys);
|
||||
}
|
||||
newState.selectedKeys = newSelectedKeys;
|
||||
|
||||
|
||||
@ -17,10 +17,6 @@
|
||||
border-radius: @border-radius-base;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&-focused:not(:hover):not(&-active-focused) {
|
||||
background: @primary-1;
|
||||
}
|
||||
@ -47,10 +43,6 @@
|
||||
align-items: flex-start;
|
||||
padding: 0 0 (@padding-xs / 2) 0;
|
||||
outline: none;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
// Disabled
|
||||
&-disabled {
|
||||
// >>> Title
|
||||
@ -101,10 +93,6 @@
|
||||
.@{tree-prefix-cls}-switcher-icon {
|
||||
svg {
|
||||
transform: rotate(-90deg);
|
||||
|
||||
.@{tree-prefix-cls}-rtl& {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -198,12 +186,6 @@
|
||||
bottom: -@tree-title-height - 4px;
|
||||
border-right: 1px solid @border-color-base;
|
||||
content: '';
|
||||
.@{tree-prefix-cls}-rtl& {
|
||||
right: auto;
|
||||
left: -@tree-title-height / 2;
|
||||
border-right: none;
|
||||
border-left: 1px solid @border-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
&-end {
|
||||
@ -233,3 +215,5 @@
|
||||
}
|
||||
|
||||
.antTreeFn(@tree-prefix-cls);
|
||||
|
||||
@import './rtl.less';
|
||||
|
||||
50
components/tree/style/rtl.less
Normal file
50
components/tree/style/rtl.less
Normal file
@ -0,0 +1,50 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import '../../checkbox/style/mixin';
|
||||
|
||||
@tree-prefix-cls: ~'@{ant-prefix}-tree';
|
||||
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
|
||||
|
||||
.antTreeFn(@tree-prefix-cls) {
|
||||
.@{tree-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
// ===================== TreeNode =====================
|
||||
.@{tree-node-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
}
|
||||
|
||||
// >>> Switcher
|
||||
& &-switcher {
|
||||
&_close {
|
||||
.@{tree-prefix-cls}-switcher-icon {
|
||||
svg {
|
||||
.@{tree-prefix-cls}-rtl& {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// ==================== Show Line =====================
|
||||
&-show-line {
|
||||
// ================ Indent lines ================
|
||||
.@{tree-prefix-cls}-indent {
|
||||
&-unit {
|
||||
&::before {
|
||||
.@{tree-prefix-cls}-rtl& {
|
||||
right: auto;
|
||||
left: -@tree-title-height / 2;
|
||||
border-right: none;
|
||||
border-left: 1px solid @border-color-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -188,7 +188,10 @@ class Upload extends React.Component<UploadProps, UploadState> {
|
||||
|
||||
const { onChange } = this.props;
|
||||
if (onChange) {
|
||||
onChange(info);
|
||||
onChange({
|
||||
...info,
|
||||
fileList: [...info.fileList],
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -130,7 +130,9 @@ describe('Upload List', () => {
|
||||
|
||||
it('should be uploading when upload a file', done => {
|
||||
let wrapper;
|
||||
const onChange = ({ file }) => {
|
||||
let latestFileList = null;
|
||||
const onChange = ({ file, fileList: eventFileList }) => {
|
||||
expect(eventFileList === latestFileList).toBeFalsy();
|
||||
if (file.status === 'uploading') {
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
}
|
||||
@ -138,6 +140,8 @@ describe('Upload List', () => {
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
done();
|
||||
}
|
||||
|
||||
latestFileList = eventFileList;
|
||||
};
|
||||
wrapper = mount(
|
||||
<Upload
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './rtl';
|
||||
|
||||
@upload-prefix-cls: ~'@{ant-prefix}-upload';
|
||||
@upload-item: ~'@{ant-prefix}-upload-list-item';
|
||||
@ -11,10 +12,6 @@
|
||||
|
||||
outline: 0;
|
||||
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
@ -52,11 +49,6 @@
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s ease;
|
||||
|
||||
.@{upload-prefix-cls}-rtl& {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
> .@{upload-prefix-cls} {
|
||||
display: table-cell;
|
||||
width: 100%;
|
||||
@ -153,19 +145,9 @@
|
||||
&:hover {
|
||||
.@{upload-prefix-cls}-list-item-name-icon-count-1 {
|
||||
padding-right: 14px;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 22px;
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
.@{upload-prefix-cls}-list-item-name-icon-count-2 {
|
||||
padding-right: 28px;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 22px;
|
||||
padding-left: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -181,19 +163,10 @@
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: @font-size-base + 8px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-name-icon-count-1 {
|
||||
padding-right: 14px;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&-card-actions {
|
||||
@ -201,11 +174,6 @@
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.picture {
|
||||
top: 25px;
|
||||
line-height: 1;
|
||||
@ -214,11 +182,6 @@
|
||||
.@{iconfont-css-prefix} {
|
||||
padding-right: 6px;
|
||||
color: @upload-actions-color;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -227,10 +190,6 @@
|
||||
padding: 0 12px 0 4px;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding: 0 4px 0 12px;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -260,11 +219,6 @@
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
right: auto;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @text-color;
|
||||
}
|
||||
@ -291,11 +245,6 @@
|
||||
&-error &-card-actions {
|
||||
.@{iconfont-css-prefix} {
|
||||
color: @error-color;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
@ -307,11 +256,6 @@
|
||||
padding-left: @font-size-base + 12px;
|
||||
font-size: @font-size-base;
|
||||
line-height: 0;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: @font-size-base + 12px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -356,11 +300,6 @@
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 8px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-icon {
|
||||
@ -373,12 +312,6 @@
|
||||
.@{iconfont-css-prefix} {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-image {
|
||||
@ -404,30 +337,14 @@
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
transition: all 0.3s;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
margin: 0 8px 0 0;
|
||||
padding-right: 48px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-name-icon-count-1 {
|
||||
padding-right: 18px;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
padding-right: 48px;
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-name-icon-count-2 {
|
||||
padding-right: 36px;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
padding-right: 48px;
|
||||
padding-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-uploading .@{upload-item}-name {
|
||||
@ -439,11 +356,6 @@
|
||||
width: ~'calc(100% - 24px)';
|
||||
margin-top: 0;
|
||||
padding-left: 56px;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
padding-right: 56px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
@ -452,11 +364,6 @@
|
||||
right: 8px;
|
||||
line-height: 1;
|
||||
opacity: 1;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: auto;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -475,11 +382,6 @@
|
||||
width: @upload-picture-card-size;
|
||||
height: @upload-picture-card-size;
|
||||
margin: 0 8px 8px 0;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
float: right;
|
||||
margin: 0 0 8px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-info {
|
||||
@ -513,12 +415,6 @@
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-eye,
|
||||
.@{iconfont-css-prefix}-download,
|
||||
.@{iconfont-css-prefix}-delete {
|
||||
@ -561,11 +457,6 @@
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
display: block;
|
||||
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
margin: 8px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-uploading {
|
||||
|
||||
172
components/upload/style/rtl.less
Normal file
172
components/upload/style/rtl.less
Normal file
@ -0,0 +1,172 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
|
||||
@upload-prefix-cls: ~'@{ant-prefix}-upload';
|
||||
@upload-item: ~'@{ant-prefix}-upload-list-item';
|
||||
|
||||
.@{upload-prefix-cls} {
|
||||
&-rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
&&-select-picture-card {
|
||||
.@{upload-prefix-cls}-rtl& {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-prefix-cls}-list {
|
||||
&-item-list-type-text {
|
||||
&:hover {
|
||||
.@{upload-prefix-cls}-list-item-name-icon-count-1 {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 22px;
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
.@{upload-prefix-cls}-list-item-name-icon-count-2 {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 22px;
|
||||
padding-left: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-item {
|
||||
&-name {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: @font-size-base + 8px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-name-icon-count-1 {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-left: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
&-card-actions {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
.@{iconfont-css-prefix} {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding: 0 4px 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
right: auto;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&-error &-card-actions {
|
||||
.@{iconfont-css-prefix} {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: 0;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-progress {
|
||||
.@{upload-prefix-cls}-list-rtl & {
|
||||
padding-right: @font-size-base + 12px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-picture,
|
||||
&-picture-card {
|
||||
.@{upload-item}-thumbnail {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 8px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-icon {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-name {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
margin: 0 8px 0 0;
|
||||
padding-right: 48px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-name-icon-count-1 {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
padding-right: 48px;
|
||||
padding-left: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-name-icon-count-2 {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
padding-right: 48px;
|
||||
padding-left: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-progress {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
padding-right: 56px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix}-close {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: auto;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-picture-card {
|
||||
.@{upload-item} {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
float: right;
|
||||
margin: 0 0 8px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-actions {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.@{upload-item}-file + .@{upload-item}-name {
|
||||
.@{upload-prefix-cls}-list-rtl& {
|
||||
margin: 8px 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -120,7 +120,7 @@ const Demo = () => (
|
||||
- Tree, Select, TreeSelect, AutoComplete rewrite
|
||||
- use virtual scrolling.
|
||||
- `onBlur` no longer trigger value change.
|
||||
- `dropdownMatchSelectWidth` no longer automatically adapts to the content width, please set the dropdown width with numbers.
|
||||
- `dropdownMatchSelectWidth={false}` will no longer automatically adapt dropdown to the content width, please set the dropdown width with numbers.
|
||||
- AutoComplete no longer support `optionLabelProp`. Please set Option `value` directly.
|
||||
- The Grid component uses flex layout.
|
||||
- Button's `danger` is now treated as a property instead of a button type.
|
||||
|
||||
@ -120,7 +120,7 @@ const Demo = () => (
|
||||
- Tree、Select、TreeSelect、AutoComplete 重新写
|
||||
- 使用虚拟滚动。
|
||||
- `onBlur` 时不再修改选中值。
|
||||
- `dropdownMatchSelectWidth` 不再自动适应内容宽度，请用数字设置下拉宽度。
|
||||
- `dropdownMatchSelectWidth={false}` 时下拉菜单不再会自动适应内容宽度，请用数字设置下拉宽度。
|
||||
- AutoComplete 不再支持 `optionLabelProp`，请直接设置 Option `value` 属性。
|
||||
- Grid 组件使用 flex 布局。
|
||||
- Button 的 `danger` 现在作为一个属性而不是按钮类型。
|
||||
|
||||
@ -190,6 +190,7 @@
|
||||
"eslint-plugin-jsx-a11y": "^6.2.1",
|
||||
"eslint-plugin-markdown": "^1.0.0",
|
||||
"eslint-plugin-react": "^7.14.2",
|
||||
"eslint-plugin-react-hooks": "^2.5.0",
|
||||
"eslint-tinker": "^0.5.0",
|
||||
"fetch-jsonp": "^1.1.3",
|
||||
"full-icu": "^1.3.0",
|
||||
|
||||
@ -220,3 +220,28 @@ a {
|
||||
box-shadow: @shadow-2;
|
||||
}
|
||||
}
|
||||
|
||||
// keep transition consistent to make mode toggle animation be more smooth, include:
|
||||
// nav bar background
|
||||
// nav search border
|
||||
// nav menu background
|
||||
// wrapper content
|
||||
// sidemenu background
|
||||
// sidemenu active background
|
||||
// content background
|
||||
// affix toc
|
||||
#header,
|
||||
#header #search-box,
|
||||
#header #nav.ant-menu,
|
||||
.main-wrapper,
|
||||
.main-wrapper > .ant-row > .main-menu .main-menu-inner > .ant-menu,
|
||||
.main-wrapper > .ant-row > .main-menu .main-menu-inner > .ant-menu.aside-container.ant-menu-inline > .ant-menu-item-group > .ant-menu-item-group-title::after,
|
||||
.main-wrapper .main-container,
|
||||
#demo-toc.toc {
|
||||
transition: all 0.3s @ease-in-out-circ;
|
||||
}
|
||||
|
||||
// remove margin-bottom from dark theme (why need margin-bottom in dark theme?)
|
||||
#header > .ant-row > .ant-col h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -193,7 +193,7 @@
|
||||
.markdown .anchor {
|
||||
margin-left: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity .3s;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
.ant-row-rtl & {
|
||||
margin-right: 8px;
|
||||
|
||||
@ -8,7 +8,7 @@ export default class ColorBlock extends Component {
|
||||
const colorMap = {
|
||||
default: ['#fff', 'unset'],
|
||||
dark: ['#314659', '#fff'],
|
||||
}
|
||||
};
|
||||
const [lastColor, firstColor] = dark ? colorMap.dark : colorMap.default;
|
||||
return {
|
||||
background: color,
|
||||
|
||||
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import cls from 'classnames';
|
||||
import Palette from './Palette';
|
||||
|
||||
const ColorPalettes = (props) => {
|
||||
const ColorPalettes = props => {
|
||||
const { dark } = props;
|
||||
|
||||
const colors = [
|
||||
@ -81,7 +81,7 @@ const ColorPalettes = (props) => {
|
||||
];
|
||||
const colorCls = cls('color-palettes', {
|
||||
'color-palettes-dark': !!dark,
|
||||
})
|
||||
});
|
||||
return (
|
||||
<div className={colorCls}>
|
||||
{colors.map(color => (
|
||||
|
||||
@ -161,10 +161,18 @@ class Demo extends React.Component {
|
||||
new RegExp(`#${meta.id}\\s*`, 'g'),
|
||||
'',
|
||||
);
|
||||
const html = `<div id="container" style="padding: 24px"></div>
|
||||
<script>
|
||||
var mountNode = document.getElementById('container');
|
||||
</script>`;
|
||||
const html = `<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
</head>
|
||||
<body>
|
||||
<div id="container" style="padding: 24px" />
|
||||
<script>var mountNode = document.getElementById('container');</script>
|
||||
</body>
|
||||
</html>`;
|
||||
|
||||
const sourceCode = this.getSourceCode();
|
||||
|
||||
@ -173,7 +181,10 @@ class Demo extends React.Component {
|
||||
html,
|
||||
js: sourceCode
|
||||
.replace(/import\s+\{(\s+[^}]*\s+)\}\s+from\s+'antd';/, 'const { $1 } = antd;')
|
||||
.replace(/import\s+\{(\s+[^}]*\s+)\}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;')
|
||||
.replace(
|
||||
/import\s+\{(\s+[^}]*\s+)\}\s+from\s+'@ant-design\/icons';/,
|
||||
'const { $1 } = icons;',
|
||||
)
|
||||
.replace("import moment from 'moment';", '')
|
||||
.replace(/import\s+\{\s+(.*)\s+\}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
|
||||
.replace(
|
||||
@ -218,7 +229,7 @@ class Demo extends React.Component {
|
||||
return acc;
|
||||
},
|
||||
// eslint-disable-next-line no-undef
|
||||
{ react: 'latest', 'react-dom': 'latest', antd: antdReproduceVersion },
|
||||
{ antd: antdReproduceVersion },
|
||||
);
|
||||
|
||||
dependencies['@ant-design/icons'] = 'latest';
|
||||
@ -242,9 +253,31 @@ import './index.css';
|
||||
${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
`.trim();
|
||||
const indexCssContent = (style || '').replace(new RegExp(`#${meta.id}\\s*`, 'g'), '');
|
||||
|
||||
const codesandboxPackage = {
|
||||
name: `${localizedTitle} - Ant Design Demo`,
|
||||
version: '1.0.0',
|
||||
main: 'index.js',
|
||||
dependencies: {
|
||||
...dependencies,
|
||||
react: '^16.12.0',
|
||||
'react-dom': '^16.12.0',
|
||||
'react-scripts': '^3.0.1',
|
||||
},
|
||||
devDependencies: {
|
||||
typescript: '^3.8.2',
|
||||
},
|
||||
scripts: {
|
||||
start: 'react-scripts start',
|
||||
build: 'react-scripts build',
|
||||
test: 'react-scripts test --env=jsdom',
|
||||
eject: 'react-scripts eject',
|
||||
},
|
||||
browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],
|
||||
};
|
||||
const codesanboxPrefillConfig = {
|
||||
files: {
|
||||
'package.json': { content: { dependencies } },
|
||||
'package.json': { content: codesandboxPackage },
|
||||
'index.css': { content: indexCssContent },
|
||||
'index.js': { content: indexJsContent },
|
||||
'index.html': {
|
||||
@ -299,21 +332,6 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
/>
|
||||
</Tooltip>
|
||||
</form>
|
||||
<form
|
||||
action="https://codepen.io/pen/define"
|
||||
method="POST"
|
||||
target="_blank"
|
||||
onClick={() => this.track({ type: 'codepen', demo: meta.id })}
|
||||
>
|
||||
<input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
|
||||
<Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
|
||||
<input
|
||||
type="submit"
|
||||
value="Create New Pen with Prefilled Data"
|
||||
className="code-box-codepen"
|
||||
/>
|
||||
</Tooltip>
|
||||
</form>
|
||||
<form
|
||||
action="https://codesandbox.io/api/v1/sandboxes/define"
|
||||
method="POST"
|
||||
@ -333,6 +351,24 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
|
||||
/>
|
||||
</Tooltip>
|
||||
</form>
|
||||
<form
|
||||
action="https://codepen.io/pen/define"
|
||||
method="POST"
|
||||
target="_blank"
|
||||
onClick={() => this.track({ type: 'codepen', demo: meta.id })}
|
||||
style={{
|
||||
display: sourceCode ? '' : 'none',
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
|
||||
<Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
|
||||
<input
|
||||
type="submit"
|
||||
value="Create New Pen with Prefilled Data"
|
||||
className="code-box-codepen"
|
||||
/>
|
||||
</Tooltip>
|
||||
</form>
|
||||
<Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
|
||||
<span
|
||||
className="code-box-code-action"
|
||||
|
||||
@ -41,7 +41,8 @@ const LIST_CN: Recommend[] = [
|
||||
const LIST_EN: Recommend[] = [
|
||||
{
|
||||
title: 'Ant Design 4.0 is out!',
|
||||
description: '⚡️ Smaller, faster, prettier and more powerfull, finally Ant Design 4.0 right here.',
|
||||
description:
|
||||
'⚡️ Smaller, faster, prettier and more powerfull, finally Ant Design 4.0 right here.',
|
||||
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*G0nDS5-aESoAAAAAAAAAAABkARQnAQ',
|
||||
href: 'https://github.com/ant-design/ant-design/issues/21656',
|
||||
popularize: true,
|
||||
@ -49,13 +50,16 @@ const LIST_EN: Recommend[] = [
|
||||
{
|
||||
title: 'Introduce AntV',
|
||||
description: '✨ New player of front-end data visualization',
|
||||
img: 'https://gw.alipayobjects.com/zos/antfincdn/Vb5TpaLRSn/089e332b-a54c-421e-a4f0-f2a3480e2f42.png',
|
||||
href: 'https://medium.com/ant-design/introduce-antv-a-new-player-in-data-visualization-90ca999cfb08',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/Vb5TpaLRSn/089e332b-a54c-421e-a4f0-f2a3480e2f42.png',
|
||||
href:
|
||||
'https://medium.com/ant-design/introduce-antv-a-new-player-in-data-visualization-90ca999cfb08',
|
||||
},
|
||||
{
|
||||
title: 'G2Plot: a charting library',
|
||||
description: '📊 A charting library based on the grammar of graphics',
|
||||
img: 'https://gw.alipayobjects.com/zos/antfincdn/NBwf%24mYoDf/d100a715-d763-4bc5-b801-23b7f56b665d.png',
|
||||
img:
|
||||
'https://gw.alipayobjects.com/zos/antfincdn/NBwf%24mYoDf/d100a715-d763-4bc5-b801-23b7f56b665d.png',
|
||||
href: 'https://github.com/antvis/G2Plot',
|
||||
},
|
||||
];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user