checks 添加 labelClassName

This commit is contained in:
liaoxuezhi 2019-09-19 13:15:40 +08:00
parent 5d299a9af4
commit e9c0883d31
6 changed files with 23 additions and 7 deletions

View File

@ -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;
} }
} }

View File

@ -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>
); );

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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}