mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

style: add checkout grop RTL (#22186)

Browse Source 
* style: add checkout grop RTL

* style: add rtl.less

* fix: add test

* fix: add group test

* Apply suggestions from code review

* Apply suggestions from code review

Co-authored-by: 偏右 <afc163@gmail.com>
This commit is contained in:
xrkffgg 2020-03-13 15:09:40 +08:00 committed by GitHub
parent 313f71a3c1
commit b032344d81
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/checkbox/Group.tsx
View File

@ -125,7 +125,7 @@ class CheckboxGroup extends React.PureComponent<CheckboxGroupProps, CheckboxGrou
}
};
renderGroup = ({ getPrefixCls }: ConfigConsumerProps) => {
renderGroup = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
const { props, state } = this;
const { prefixCls: customizePrefixCls, className, style, options, ...restProps } = props;
const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
@ -162,7 +162,9 @@ class CheckboxGroup extends React.PureComponent<CheckboxGroupProps, CheckboxGrou
cancelValue: this.cancelValue,
};
const classString = classNames(groupPrefixCls, className);
const classString = classNames(groupPrefixCls, className, {
[`${groupPrefixCls}-rtl`]: direction === 'rtl',
});
return (
<div className={classString} style={style} {...domProps}>
<GroupContext.Provider value={context}>{children}</GroupContext.Provider>

2
components/checkbox/__tests__/__snapshots__/demo.test.js.snap
View File

@ -148,7 +148,7 @@ exports[`renders ./components/checkbox/demo/controller.md correctly 1`] = `
</button>
<button
class="ant-btn ant-btn-primary ant-btn-sm"
style="margin-left:10px"
style="margin:0 10px"
type="button"
>
<span>

2
components/checkbox/__tests__/__snapshots__/group.test.js.snap
View File

@ -48,6 +48,6 @@ exports[`CheckboxGroup passes prefixCls down to checkbox 1`] = `
exports[`CheckboxGroup rtl render component should be rendered correctly in RTL direction 1`] = `
<div
class="ant-checkbox-group"
class="ant-checkbox-group ant-checkbox-group-rtl"
/>
`;

2
components/checkbox/demo/controller.md
View File

@ -57,7 +57,7 @@ class App extends React.Component {
{!this.state.checked ? 'Check' : 'Uncheck'}
</Button>
<Button
style={{ marginLeft: '10px' }}
style={{ margin: '0 10px' }}
type="primary"
size="small"
onClick={this.toggleDisable}

1
components/checkbox/style/index.less
View File

@ -1,4 +1,5 @@
@import '../../style/themes/index';
@import './mixin';
@import './rtl';
.antCheckboxFn();

22
components/checkbox/style/rtl.less Normal file
View File

@ -0,0 +1,22 @@
@import '../../style/mixins/index';
.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
.@{checkbox-prefix-cls}-group {
&-item {
.@{checkbox-prefix-cls}-group-rtl & {
margin-right: 0;
margin-left: 8px;
}
&:last-child {
.@{checkbox-prefix-cls}-group-rtl & {
margin-left: 0 !important;
}
}
}
&-item + &-item {
.@{checkbox-prefix-cls}-group-rtl & {
margin-left: 8px;
}
}
}
}