checks 添加 labelClassName
This commit is contained in:
parent
5d299a9af4
commit
e9c0883d31
|
@ -219,6 +219,7 @@
|
||||||
&-desc {
|
&-desc {
|
||||||
color: $text--muted-color;
|
color: $text--muted-color;
|
||||||
margin-left: $Checkbox-gap;
|
margin-left: $Checkbox-gap;
|
||||||
|
margin-top: $gap-xs;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -23,6 +23,7 @@ interface CheckboxProps {
|
||||||
type?: string;
|
type?: string;
|
||||||
size?: 'sm' | 'lg' | 'small' | 'large';
|
size?: 'sm' | 'lg' | 'small' | 'large';
|
||||||
label?: string;
|
label?: string;
|
||||||
|
labelClassName?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
onChange?: (value: any) => void;
|
onChange?: (value: any) => void;
|
||||||
value?: any;
|
value?: any;
|
||||||
|
@ -75,7 +76,8 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
|
||||||
checked,
|
checked,
|
||||||
type,
|
type,
|
||||||
name,
|
name,
|
||||||
data
|
data,
|
||||||
|
labelClassName
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
className = (className ? className : '') + (size && sizeMap[size] ? ` ${sizeMap[size]}` : '');
|
className = (className ? className : '') + (size && sizeMap[size] ? ` ${sizeMap[size]}` : '');
|
||||||
|
@ -105,7 +107,7 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
|
||||||
name={name}
|
name={name}
|
||||||
/>
|
/>
|
||||||
<i />
|
<i />
|
||||||
<span>{children || label}</span>
|
<span className={cx(labelClassName)}>{children || label}</span>
|
||||||
{description ? (<div className={cx("Checkbox-desc")}>{filter(description, data)}</div>) : null}
|
{description ? (<div className={cx("Checkbox-desc")}>{filter(description, data)}</div>) : null}
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
|
|
|
@ -111,8 +111,10 @@ interface CheckboxesProps extends OptionProps {
|
||||||
inline?: boolean;
|
inline?: boolean;
|
||||||
columnsCount?: number;
|
columnsCount?: number;
|
||||||
checked?: boolean;
|
checked?: boolean;
|
||||||
|
labelClassName?: string;
|
||||||
classPrefix: string;
|
classPrefix: string;
|
||||||
classnames: ClassNamesFn;
|
classnames: ClassNamesFn;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
|
export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
|
||||||
|
@ -173,7 +175,8 @@ export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
|
||||||
placeholder,
|
placeholder,
|
||||||
columnsCount,
|
columnsCount,
|
||||||
disabled,
|
disabled,
|
||||||
inline
|
inline,
|
||||||
|
labelClassName
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
let valueArray = value2array(value, {
|
let valueArray = value2array(value, {
|
||||||
|
@ -192,6 +195,7 @@ export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
|
||||||
checked={!!~valueArray.indexOf(option)}
|
checked={!!~valueArray.indexOf(option)}
|
||||||
disabled={disabled || option.disabled}
|
disabled={disabled || option.disabled}
|
||||||
inline={inline}
|
inline={inline}
|
||||||
|
labelClassName={labelClassName}
|
||||||
>
|
>
|
||||||
{option.label}
|
{option.label}
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
|
|
|
@ -31,6 +31,7 @@ interface RadioProps extends OptionProps {
|
||||||
onChange?: Function;
|
onChange?: Function;
|
||||||
columnsCount: number;
|
columnsCount: number;
|
||||||
itemClassName?: string;
|
itemClassName?: string;
|
||||||
|
labelClassName?: string;
|
||||||
classPrefix: string;
|
classPrefix: string;
|
||||||
classnames: ClassNamesFn;
|
classnames: ClassNamesFn;
|
||||||
}
|
}
|
||||||
|
@ -83,7 +84,7 @@ export class Radios extends React.Component<RadioProps, any> {
|
||||||
return this.renderGroup(option, index, valueArray);
|
return this.renderGroup(option, index, valueArray);
|
||||||
}
|
}
|
||||||
|
|
||||||
const {disabled, inline, itemClassName, classnames: cx} = this.props;
|
const {disabled, inline, itemClassName, classnames: cx, labelClassName} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Checkbox
|
<Checkbox
|
||||||
|
@ -95,6 +96,7 @@ export class Radios extends React.Component<RadioProps, any> {
|
||||||
disabled={disabled || option.disabled}
|
disabled={disabled || option.disabled}
|
||||||
description={option.description}
|
description={option.description}
|
||||||
inline={inline}
|
inline={inline}
|
||||||
|
labelClassName={labelClassName}
|
||||||
>
|
>
|
||||||
{option.label}
|
{option.label}
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
|
|
|
@ -9,6 +9,7 @@ export interface CheckboxesProps extends OptionsControlProps {
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
itemClassName?: string;
|
itemClassName?: string;
|
||||||
columnsCount?: number;
|
columnsCount?: number;
|
||||||
|
labelClassName?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class CheckboxesControl extends React.Component<CheckboxesProps, any> {
|
export default class CheckboxesControl extends React.Component<CheckboxesProps, any> {
|
||||||
|
@ -48,7 +49,7 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
|
||||||
return this.renderGroup(option, index);
|
return this.renderGroup(option, index);
|
||||||
}
|
}
|
||||||
|
|
||||||
const {itemClassName, onToggle, selectedOptions, disabled, inline} = this.props;
|
const {itemClassName, onToggle, selectedOptions, disabled, inline, labelClassName} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Checkbox
|
<Checkbox
|
||||||
|
@ -58,6 +59,7 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
|
||||||
checked={!!~selectedOptions.indexOf(option)}
|
checked={!!~selectedOptions.indexOf(option)}
|
||||||
disabled={disabled || option.disabled}
|
disabled={disabled || option.disabled}
|
||||||
inline={inline}
|
inline={inline}
|
||||||
|
labelClassName={labelClassName}
|
||||||
>
|
>
|
||||||
{option.label}
|
{option.label}
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
|
@ -77,7 +79,8 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
|
||||||
onToggleAll,
|
onToggleAll,
|
||||||
checkAll,
|
checkAll,
|
||||||
classnames: cx,
|
classnames: cx,
|
||||||
itemClassName
|
itemClassName,
|
||||||
|
labelClassName
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
let body: Array<React.ReactNode> = [];
|
let body: Array<React.ReactNode> = [];
|
||||||
|
@ -96,6 +99,7 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
|
||||||
partial={!!(selectedOptions.length && selectedOptions.length !== options.length)}
|
partial={!!(selectedOptions.length && selectedOptions.length !== options.length)}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
inline={inline}
|
inline={inline}
|
||||||
|
labelClassName={labelClassName}
|
||||||
>
|
>
|
||||||
全选/不选
|
全选/不选
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
|
|
|
@ -9,6 +9,7 @@ import {dataMapping} from '../../utils/tpl-builtin';
|
||||||
export interface RadiosProps extends OptionsControlProps {
|
export interface RadiosProps extends OptionsControlProps {
|
||||||
placeholder?: any;
|
placeholder?: any;
|
||||||
columnsCount?: number;
|
columnsCount?: number;
|
||||||
|
labelClassName?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class RadiosControl extends React.Component<RadiosProps, any> {
|
export default class RadiosControl extends React.Component<RadiosProps, any> {
|
||||||
|
@ -51,7 +52,8 @@ export default class RadiosControl extends React.Component<RadiosProps, any> {
|
||||||
formMode,
|
formMode,
|
||||||
columnsCount,
|
columnsCount,
|
||||||
classPrefix,
|
classPrefix,
|
||||||
itemClassName
|
itemClassName,
|
||||||
|
labelClassName
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -64,6 +66,7 @@ export default class RadiosControl extends React.Component<RadiosProps, any> {
|
||||||
joinValues={joinValues}
|
joinValues={joinValues}
|
||||||
extractValue={extractValue}
|
extractValue={extractValue}
|
||||||
delimiter={delimiter}
|
delimiter={delimiter}
|
||||||
|
labelClassName={labelClassName}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
options={options}
|
options={options}
|
||||||
columnsCount={columnsCount}
|
columnsCount={columnsCount}
|
||||||
|
|
Loading…
Reference in New Issue