diff --git a/components/space/__tests__/index.test.js b/components/space/__tests__/index.test.js index 446d302558..5d59ffaa1e 100644 --- a/components/space/__tests__/index.test.js +++ b/components/space/__tests__/index.test.js @@ -42,18 +42,8 @@ describe('Space', () => { , ); - expect( - wrapper - .find('.ant-space-item') - .at(0) - .prop('style').marginRight, - ).toBe(10); - expect( - wrapper - .find('.ant-space-item') - .at(1) - .prop('style').marginRight, - ).toBeUndefined(); + expect(wrapper.find('.ant-space-item').at(0).prop('style').marginRight).toBe(10); + expect(wrapper.find('.ant-space-item').at(1).prop('style').marginRight).toBeUndefined(); }); it('should render vertical space width customize size', () => { @@ -64,18 +54,8 @@ describe('Space', () => { , ); - expect( - wrapper - .find('.ant-space-item') - .at(0) - .prop('style').marginBottom, - ).toBe(10); - expect( - wrapper - .find('.ant-space-item') - .at(1) - .prop('style').marginBottom, - ).toBeUndefined(); + expect(wrapper.find('.ant-space-item').at(0).prop('style').marginBottom).toBe(10); + expect(wrapper.find('.ant-space-item').at(1).prop('style').marginBottom).toBeUndefined(); }); it('should render correct with children', () => { diff --git a/components/space/index.tsx b/components/space/index.tsx index d1cde8ccc7..0d33e085a6 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import classnames from 'classnames'; +import classNames from 'classnames'; import toArray from 'rc-util/lib/Children/toArray'; import { ConfigConsumerProps, ConfigContext } from '../config-provider'; import { SizeType } from '../config-provider/SizeContext'; @@ -19,7 +19,9 @@ const spaceSize = { }; const Space: React.FC = props => { - const { getPrefixCls, space }: ConfigConsumerProps = React.useContext(ConfigContext); + const { getPrefixCls, space, direction: directionConfig }: ConfigConsumerProps = React.useContext( + ConfigContext, + ); const { size = space?.size || 'small', @@ -38,10 +40,17 @@ const Space: React.FC = props => { } const prefixCls = getPrefixCls('space', customizePrefixCls); - const cn = classnames(prefixCls, `${prefixCls}-${direction}`, className); + const cn = classNames( + prefixCls, + `${prefixCls}-${direction}`, + { [`${prefixCls}-rtl`]: directionConfig === 'rtl' }, + className, + ); const itemClassName = `${prefixCls}-item`; + const marginDirection = directionConfig === 'rtl' ? 'marginLeft' : 'marginRight'; + return (
{items.map((child, i) => ( @@ -53,7 +62,7 @@ const Space: React.FC = props => { i === len - 1 ? {} : { - [direction === 'vertical' ? 'marginBottom' : 'marginRight']: + [direction === 'vertical' ? 'marginBottom' : marginDirection]: typeof size === 'string' ? spaceSize[size] : size, } } diff --git a/components/space/style/index.less b/components/space/style/index.less index 1ff9fd379f..45c1ff17cf 100644 --- a/components/space/style/index.less +++ b/components/space/style/index.less @@ -12,3 +12,5 @@ flex-direction: column; } } + +@import './rtl'; diff --git a/components/space/style/rtl.less b/components/space/style/rtl.less new file mode 100644 index 0000000000..75aa411b7a --- /dev/null +++ b/components/space/style/rtl.less @@ -0,0 +1,10 @@ +@import '../../style/themes/index'; +@import '../../style/mixins/index'; + +@space-prefix-cls: ~'@{ant-prefix}-space'; + +.@{space-prefix-cls} { + &-rtl { + direction: rtl; + } +}