From e9c0883d31d157b976f0da17bd931e896d0b1fb0 Mon Sep 17 00:00:00 2001
From: liaoxuezhi <liaoxuezhi@baidu.com>
Date: Thu, 19 Sep 2019 13:15:40 +0800
Subject: [PATCH] =?UTF-8?q?checks=20=E6=B7=BB=E5=8A=A0=20labelClassName?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scss/components/form/_checks.scss | 1 +
 src/components/Checkbox.tsx       | 6 ++++--
 src/components/Checkboxes.tsx     | 6 +++++-
 src/components/Radios.tsx         | 4 +++-
 src/renderers/Form/Checkboxes.tsx | 8 ++++++--
 src/renderers/Form/Radios.tsx     | 5 ++++-
 6 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/scss/components/form/_checks.scss b/scss/components/form/_checks.scss
index 964db684..30b780ae 100644
--- a/scss/components/form/_checks.scss
+++ b/scss/components/form/_checks.scss
@@ -219,6 +219,7 @@
     &-desc {
         color: $text--muted-color;
         margin-left: $Checkbox-gap;
+        margin-top: $gap-xs;
     }
 }
 
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 206d7463..bcda435c 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -23,6 +23,7 @@ interface CheckboxProps {
     type?: string;
     size?: 'sm' | 'lg' | 'small' | 'large';
     label?: string;
+    labelClassName?: string;
     className?: string;
     onChange?: (value: any) => void;
     value?: any;
@@ -75,7 +76,8 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
             checked,
             type,
             name,
-            data
+            data,
+            labelClassName
         } = this.props;
 
         className = (className ? className : '') + (size && sizeMap[size] ? ` ${sizeMap[size]}` : '');
@@ -105,7 +107,7 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
                     name={name}
                 />
                 <i />
-                <span>{children || label}</span>
+                <span className={cx(labelClassName)}>{children || label}</span>
                 {description ? (<div className={cx("Checkbox-desc")}>{filter(description, data)}</div>) : null}
             </label>
         );
diff --git a/src/components/Checkboxes.tsx b/src/components/Checkboxes.tsx
index 5253572b..cc4baa93 100644
--- a/src/components/Checkboxes.tsx
+++ b/src/components/Checkboxes.tsx
@@ -111,8 +111,10 @@ interface CheckboxesProps extends OptionProps {
     inline?: boolean;
     columnsCount?: number;
     checked?: boolean;
+    labelClassName?: string;
     classPrefix: string;
     classnames: ClassNamesFn;
+    
 }
 
 export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
@@ -173,7 +175,8 @@ export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
             placeholder,
             columnsCount,
             disabled,
-            inline
+            inline,
+            labelClassName
         } = this.props;
 
         let valueArray = value2array(value, {
@@ -192,6 +195,7 @@ export class Checkboxes extends React.PureComponent<CheckboxesProps, any> {
                     checked={!!~valueArray.indexOf(option)}
                     disabled={disabled || option.disabled}
                     inline={inline}
+                    labelClassName={labelClassName}
                 >
                     {option.label}
                 </Checkbox>
diff --git a/src/components/Radios.tsx b/src/components/Radios.tsx
index 91019414..0bf31f83 100644
--- a/src/components/Radios.tsx
+++ b/src/components/Radios.tsx
@@ -31,6 +31,7 @@ interface RadioProps extends OptionProps {
     onChange?: Function;
     columnsCount: number;
     itemClassName?: string;
+    labelClassName?: string;
     classPrefix: string;
     classnames: ClassNamesFn;
 }
@@ -83,7 +84,7 @@ export class Radios extends React.Component<RadioProps, any> {
             return this.renderGroup(option, index, valueArray);
         }
 
-        const {disabled, inline, itemClassName, classnames: cx} = this.props;
+        const {disabled, inline, itemClassName, classnames: cx, labelClassName} = this.props;
 
         return (
             <Checkbox
@@ -95,6 +96,7 @@ export class Radios extends React.Component<RadioProps, any> {
                 disabled={disabled || option.disabled}
                 description={option.description}
                 inline={inline}
+                labelClassName={labelClassName}
             >
                 {option.label}
             </Checkbox>
diff --git a/src/renderers/Form/Checkboxes.tsx b/src/renderers/Form/Checkboxes.tsx
index 1a346190..a331fc81 100644
--- a/src/renderers/Form/Checkboxes.tsx
+++ b/src/renderers/Form/Checkboxes.tsx
@@ -9,6 +9,7 @@ export interface CheckboxesProps extends OptionsControlProps {
     disabled?: boolean;
     itemClassName?: string;
     columnsCount?: number;
+    labelClassName?: string;
 }
 
 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);
         }
 
-        const {itemClassName, onToggle, selectedOptions, disabled, inline} = this.props;
+        const {itemClassName, onToggle, selectedOptions, disabled, inline, labelClassName} = this.props;
 
         return (
             <Checkbox
@@ -58,6 +59,7 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
                 checked={!!~selectedOptions.indexOf(option)}
                 disabled={disabled || option.disabled}
                 inline={inline}
+                labelClassName={labelClassName}
             >
                 {option.label}
             </Checkbox>
@@ -77,7 +79,8 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
             onToggleAll,
             checkAll,
             classnames: cx,
-            itemClassName
+            itemClassName,
+            labelClassName
         } = this.props;
 
         let body: Array<React.ReactNode> = [];
@@ -96,6 +99,7 @@ export default class CheckboxesControl extends React.Component<CheckboxesProps,
                     partial={!!(selectedOptions.length && selectedOptions.length !== options.length)}
                     disabled={disabled}
                     inline={inline}
+                    labelClassName={labelClassName}
                 >
                     全选/不选
                 </Checkbox>
diff --git a/src/renderers/Form/Radios.tsx b/src/renderers/Form/Radios.tsx
index 9f129b87..040646a3 100644
--- a/src/renderers/Form/Radios.tsx
+++ b/src/renderers/Form/Radios.tsx
@@ -9,6 +9,7 @@ import {dataMapping} from '../../utils/tpl-builtin';
 export interface RadiosProps extends OptionsControlProps {
     placeholder?: any;
     columnsCount?: number;
+    labelClassName?: string;
 }
 
 export default class RadiosControl extends React.Component<RadiosProps, any> {
@@ -51,7 +52,8 @@ export default class RadiosControl extends React.Component<RadiosProps, any> {
             formMode,
             columnsCount,
             classPrefix,
-            itemClassName
+            itemClassName,
+            labelClassName
         } = this.props;
 
         return (
@@ -64,6 +66,7 @@ export default class RadiosControl extends React.Component<RadiosProps, any> {
                 joinValues={joinValues}
                 extractValue={extractValue}
                 delimiter={delimiter}
+                labelClassName={labelClassName}
                 placeholder={placeholder}
                 options={options}
                 columnsCount={columnsCount}