feat: checkbox adaptation

src/config.json

@@ -459,7 +459,7 @@
           "author": "ailululu"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Checkbox",
           "type": "component",
           "cName": "复选按钮",
@@ -470,7 +470,7 @@
           "author": "oasis"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "CheckboxGroup",
           "type": "component",
           "cName": "多选按钮组",

src/packages/checkbox/checkbox.taro.tsx

@@ -1,14 +1,7 @@
-import React, {
-  FunctionComponent,
-  ReactNode,
-  useContext,
-  useEffect,
-  useState,
-} from 'react'
-import { Checked, CheckDisabled, CheckNormal } from '@nutui/icons-react-taro'
+import React, { ReactNode, useContext, useEffect, useState, FC } from 'react'
+import { CheckDisabled, Checked, CheckNormal } from '@nutui/icons-react-taro'
 import classNames from 'classnames'
 import { View } from '@tarojs/components'
-import CheckboxGroup from '@/packages/checkboxgroup/index.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import Context from '../checkboxgroup/context'
 import { usePropsValue } from '@/utils/use-props-value'
@@ -43,10 +36,10 @@ const defaultProps = {
 } as CheckboxProps
 
 const classPrefix = 'nut-checkbox'
-export const Checkbox: FunctionComponent<
+export const Checkbox: FC<
   Partial<CheckboxProps> &
     Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>
-> & { Group: typeof CheckboxGroup } = (props) => {
+> = (props) => {
   const { children } = {
     ...defaultProps,
     ...props,
@@ -152,13 +145,13 @@ export const Checkbox: FunctionComponent<
   }
   const renderLabel = () => {
     return (
-      <span
+      <View
         className={classNames(`${classPrefix}-label `, {
           [`${classPrefix}-label-disabled`]: innerDisabled,
         })}
       >
         {children || label}
-      </span>
+      </View>
     )
   }
 
@@ -231,4 +224,3 @@ export const Checkbox: FunctionComponent<
 }
 
 Checkbox.displayName = 'NutCheckBox'
-Checkbox.Group = CheckboxGroup

src/packages/checkbox/checkbox.tsx

@@ -5,9 +5,8 @@ import React, {
   useEffect,
   useState,
 } from 'react'
-import { Checked, CheckDisabled, CheckNormal } from '@nutui/icons-react'
+import { CheckDisabled, Checked, CheckNormal } from '@nutui/icons-react'
 import classNames from 'classnames'
-import CheckboxGroup from '@/packages/checkboxgroup'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import Context from '../checkboxgroup/context'
 import { usePropsValue } from '@/utils/use-props-value'
@@ -45,7 +44,7 @@ const classPrefix = 'nut-checkbox'
 export const Checkbox: FunctionComponent<
   Partial<CheckboxProps> &
     Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>
-> & { Group: typeof CheckboxGroup } = (props) => {
+> = (props) => {
   const { children } = {
     ...defaultProps,
     ...props,
@@ -230,4 +229,3 @@ export const Checkbox: FunctionComponent<
 }
 
 Checkbox.displayName = 'NutCheckBox'
-Checkbox.Group = CheckboxGroup

src/packages/checkbox/demos/h5/demo2.tsx

@@ -37,9 +37,7 @@ const Demo2 = () => {
           value={controlledGroup}
           onChange={(value) => setControlledGroup(value)}
         >
-          <span>
-            <Checkbox value="1" label={optionsDemo1[0].label} />
-          </span>
+          <Checkbox value="1" label={optionsDemo1[0].label} />
           <Checkbox value="2" label={optionsDemo1[1].label} />
           <Checkbox value="3" disabled label={optionsDemo1[2].label} />
         </Checkbox.Group>

src/packages/checkbox/demos/h5/demo3.tsx

@@ -30,9 +30,7 @@ const Demo3 = () => {
       </Cell>
       <Cell className="nut-cell">
         <Checkbox.Group labelPosition="left" defaultValue={['1']}>
-          <span>
-            <Checkbox value="1" label={optionsDemo1[0].label} />
-          </span>
+          <Checkbox value="1" label={optionsDemo1[0].label} />
           <Checkbox value="2" label={optionsDemo1[1].label} />
           <Checkbox value="3" label={optionsDemo1[2].label} />
         </Checkbox.Group>

src/packages/checkbox/demos/taro/demo1.tsx

@@ -5,6 +5,7 @@ import { Cell, Checkbox } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
   const [checked] = useState(false)
+  const fontSize = { fontSize: 12 }
   return (
     <>
       <Cell className="nut-cell">
@@ -23,8 +24,8 @@ const Demo1 = () => {
                 alignItems: 'center',
               }}
             >
-              <View>复选框</View>
-              <View style={{ color: 'gray' }}>描述信息</View>
+              <View style={fontSize}>复选框</View>
+              <View style={{ color: 'gray', ...fontSize }}>描述信息</View>
             </View>
           }
           defaultChecked={!checked}
@@ -44,8 +45,8 @@ const Demo1 = () => {
                 alignItems: 'center',
               }}
             >
-              <View>复选框</View>
-              <View style={{ color: 'gray' }}>描述信息</View>
+              <View style={fontSize}>复选框</View>
+              <View style={{ color: 'gray', ...fontSize }}>描述信息</View>
             </View>
           }
           defaultChecked={checked}
@@ -62,8 +63,8 @@ const Demo1 = () => {
                 alignItems: 'center',
               }}
             >
-              <View>复选框</View>
-              <View>描述信息</View>
+              <View style={fontSize}>复选框</View>
+              <View style={fontSize}>描述信息</View>
             </View>
           }
           defaultChecked={checked}

src/packages/checkbox/demos/taro/demo13.tsx

@@ -30,6 +30,7 @@ const Demo13 = () => {
           ref={checkboxgroup2Ref}
           direction="horizontal"
           defaultValue={checkboxgroup2}
+          style={{ width: '50%' }}
           onChange={(value) => {
             if (value.length === 4) {
               setIndeterminate(false)
@@ -42,10 +43,18 @@ const Demo13 = () => {
             }
           }}
         >
-          <Checkbox value="1">选项</Checkbox>
-          <Checkbox value="2">选项</Checkbox>
-          <Checkbox value="3">选项</Checkbox>
-          <Checkbox value="4">选项</Checkbox>
+          <Checkbox value="1" style={{ marginBottom: 10 }}>
+            选项
+          </Checkbox>
+          <Checkbox value="2" style={{ marginBottom: 10 }}>
+            选项
+          </Checkbox>
+          <Checkbox value="3" style={{ marginBottom: 10 }}>
+            选项
+          </Checkbox>
+          <Checkbox value="4" style={{ marginBottom: 10 }}>
+            选项
+          </Checkbox>
         </Checkbox.Group>
       </Cell>
     </>

src/packages/checkbox/demos/taro/demo2.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Checkbox, Cell } from '@nutui/nutui-react-taro'
+import { Cell, Checkbox } from '@nutui/nutui-react-taro'
 import { Checklist } from '@nutui/icons-react-taro'
 
 const Demo2 = () => {
@@ -36,9 +36,7 @@ const Demo2 = () => {
           value={controlledGroup}
           onChange={(value) => setControlledGroup(value)}
         >
-          <span>
-            <Checkbox value="1" label={optionsDemo1[0].label} />
-          </span>
+          <Checkbox value="1" label={optionsDemo1[0].label} />
           <Checkbox value="2" label={optionsDemo1[1].label} />
           <Checkbox value="3" disabled label={optionsDemo1[2].label} />
         </Checkbox.Group>

src/packages/checkbox/demos/taro/demo3.tsx

@@ -30,9 +30,7 @@ const Demo3 = () => {
       </Cell>
       <Cell className="nut-cell">
         <Checkbox.Group labelPosition="left" defaultValue={['1']}>
-          <span>
-            <Checkbox value="1" label={optionsDemo1[0].label} />
-          </span>
+          <Checkbox value="1" label={optionsDemo1[0].label} />
           <Checkbox value="2" label={optionsDemo1[1].label} />
           <Checkbox value="3" label={optionsDemo1[2].label} />
         </Checkbox.Group>

src/packages/checkbox/demos/taro/demo8.tsx

@@ -21,12 +21,6 @@ const Demo8 = () => {
           setShowToast(false)
         }}
       />
-      <Checkbox
-        defaultChecked={false}
-        onChange={(state) => handleChange(state)}
-      >
-        change复选框
-      </Checkbox>
       <Cell className="nut-cell">
         <Checkbox
           defaultChecked={false}

src/packages/checkbox/demos/taro/demo9.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Checkbox, Toast, Cell } from '@nutui/nutui-react-taro'
+import { Cell, Checkbox, Toast } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo9 = () => {
   const [checkboxgroup1, setCheckboxgroup1] = useState(['1'])
@@ -32,7 +33,7 @@ const Demo9 = () => {
         </Checkbox.Group>
       </Cell>
       <Cell>
-        <span>选中：{checkboxgroup1.toString()}</span>
+        <View>选中：{checkboxgroup1.toString()}</View>
       </Cell>
     </>
   )

src/packages/checkbox/index.taro.ts

@@ -1,4 +1,15 @@
-import { Checkbox } from './checkbox.taro'
+import { Checkbox, CheckboxProps } from './checkbox.taro'
+import { CheckboxGroup } from '../checkboxgroup/checkboxgroup.taro'
 
 export type { CheckboxProps, CheckboxShape } from './checkbox.taro'
-export default Checkbox
+
+type CompoundedComponent = React.FC<
+  Partial<CheckboxProps> &
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>
+> & {
+  Group: typeof CheckboxGroup
+}
+const InnerCheckbox = Checkbox as CompoundedComponent
+InnerCheckbox.Group = CheckboxGroup
+
+export default InnerCheckbox

src/packages/checkbox/index.ts

@@ -1,4 +1,15 @@
-import { Checkbox } from './checkbox'
+import { Checkbox, CheckboxProps } from './checkbox'
+import { CheckboxGroup } from '../checkboxgroup/checkboxgroup'
 
 export type { CheckboxProps, CheckboxShape } from './checkbox'
-export default Checkbox
+
+type CompoundedComponent = React.FC<
+  Partial<CheckboxProps> &
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>
+> & {
+  Group: typeof CheckboxGroup
+}
+const InnerCheckbox = Checkbox as CompoundedComponent
+InnerCheckbox.Group = CheckboxGroup
+
+export default InnerCheckbox

src/packages/checkboxgroup/checkboxgroup.scss

@@ -6,6 +6,9 @@
   }
 
   &-vertical {
+    display: flex;
+    flex-direction: column;
+
     .nut-checkbox {
       margin-bottom: 5px;
 
@@ -22,8 +25,13 @@
   }
 
   &-horizontal {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
     .nut-checkbox {
       display: inline-flex;
+      flex: 1;
       margin-right: 20px;
 
       &-button-active {