p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

优化 Radios Checkboxes 的 group 功能

This commit is contained in:
liaoxuezhi 2019-06-17 11:52:32 +08:00
parent 1180451a23
commit 8dc97862fc
3 changed files with 34 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
scss/components/form/_checks.scss
View File

@ -219,14 +219,27 @@
display: inline-block;
margin-right: $gap-md;
}
}
&-group {
padding-left: px2rem(120px);
.#{$ns}RadiosControl-group,
.#{$ns}CheckboxesControl-group {
.#{$ns}RadiosControl-group,
.#{$ns}CheckboxesControl-group {
padding-left: px2rem(80px);
@include clearfix();
}
&-groupLabel {
float: left;
margin-left: px2rem(-120px);
> .#{$ns}RadiosControl-groupLabel,
> .#{$ns}CheckboxesControl-groupLabel {
float: left;
width: px2rem(80px);
margin-left: px2rem(-80px);
}
}
}
.#{$ns}RadiosControl-groupLabel,
.#{$ns}CheckboxesControl-groupLabel {
display: block;
}

13
src/components/Radios.tsx
View File

@ -78,8 +78,8 @@ export class Radios extends React.Component<RadioProps, any> {
} = this.props;
return (
<div key={index} className={cx("RadiosControl-group")}>
<label className={cx("RadiosControl-groupLabel")}>{option.label}</label>
<div key={index} className={cx("RadiosControl-group", option.className)}>
<label className={cx("RadiosControl-groupLabel", option.labelClassName)}>{option.label}</label>
{
option.children && option.children.length
@ -91,6 +91,11 @@ export class Radios extends React.Component<RadioProps, any> {
}
renderItem(option:Option, index:number, valueArray: Array<Option>) {
if (option.children) {
return this.renderGroup(option, index, valueArray);
}
const {
disabled,
inline,
@ -137,9 +142,7 @@ export class Radios extends React.Component<RadioProps, any> {
let body: Array<React.ReactNode> = [];
if (options) {
body = options.map((option, key) => option.children
? this.renderGroup(option, key, valueArray)
: this.renderItem(option, key, valueArray));
body = options.map((option, key) => this.renderItem(option, key, valueArray));
}
if (!inline && columnsCount > 1) {

12
src/renderers/Form/Checkboxes.tsx
View File

@ -38,8 +38,8 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
} = this.props;
return (
<div key={index} className={cx("CheckboxesControl-group")}>
<label className={cx("CheckboxesControl-groupLabel")}>{option.label}</label>
<div key={index} className={cx("CheckboxesControl-group", option.className)}>
<label className={cx("CheckboxesControl-groupLabel", option.labelClassName)}>{option.label}</label>
{
option.children && option.children.length
@ -51,6 +51,10 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
}
renderItem(option:Option, index:number) {
if (option.children) {
return this.renderGroup(option, index);
}
const {
itemClassName,
onToggle,
@ -92,9 +96,7 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
let body:Array<React.ReactNode> = [];
if (options && options.length) {
body = options.map((option, key) => option.children
? this.renderGroup(option, key)
: this.renderItem(option, key));
body = options.map((option, key) => this.renderItem(option, key));
}
if (checkAll && body.length) {