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 } 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/taro/demo1.tsx

@@ -23,8 +23,8 @@ const Demo1 = () => {
                 alignItems: 'center',
               }}
             >
-              <View>复选框</View>
-              <View style={{ color: 'gray' }}>描述信息</View>
+              <View style={{ fontSize: 12 }}>复选框</View>
+              <View style={{ color: 'gray', fontSize: 12 }}>描述信息</View>
             </View>
           }
           defaultChecked={!checked}
@@ -44,8 +44,8 @@ const Demo1 = () => {
                 alignItems: 'center',
               }}
             >
-              <View>复选框</View>
-              <View style={{ color: 'gray' }}>描述信息</View>
+              <View style={{ fontSize: 12 }}>复选框</View>
+              <View style={{ color: 'gray', fontSize: 12 }}>描述信息</View>
             </View>
           }
           defaultChecked={checked}
@@ -62,8 +62,8 @@ const Demo1 = () => {
                 alignItems: 'center',
               }}
             >
-              <View>复选框</View>
-              <View>描述信息</View>
+              <View style={{ fontSize: 12 }}>复选框</View>
+              <View style={{ fontSize: 12 }}>描述信息</View>
             </View>
           }
           defaultChecked={checked}

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

@@ -1,6 +1,7 @@
 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'
+import { View } from '@tarojs/components'
 
 const Demo2 = () => {
   const [controlled, setControlled] = useState(false)
@@ -36,9 +37,9 @@ const Demo2 = () => {
           value={controlledGroup}
           onChange={(value) => setControlledGroup(value)}
         >
-          <span>
+          <View>
             <Checkbox value="1" label={optionsDemo1[0].label} />
-          </span>
+          </View>
           <Checkbox value="2" label={optionsDemo1[1].label} />
           <Checkbox value="3" disabled label={optionsDemo1[2].label} />
         </Checkbox.Group>

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Checkbox, Cell } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
 
 const Demo3 = () => {
   const [checked, setChecked] = useState(true)
@@ -30,9 +31,9 @@ const Demo3 = () => {
       </Cell>
       <Cell className="nut-cell">
         <Checkbox.Group labelPosition="left" defaultValue={['1']}>
-          <span>
+          <View>
             <Checkbox value="1" label={optionsDemo1[0].label} />
-          </span>
+          </View>
           <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,6 +25,10 @@
   }
 
   &-horizontal {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
     .nut-checkbox {
       display: inline-flex;
       margin-right: 20px;