imporve checkbox & radio

packages/arco-lib/src/components/Checkbox.tsx

@@ -1,13 +1,13 @@
-import { Checkbox as BaseCheckbox } from "@arco-design/web-react";
-import { Type, Static } from "@sinclair/typebox";
-import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
+import { Checkbox as BaseCheckbox } from '@arco-design/web-react';
+import { Type, Static } from '@sinclair/typebox';
+import { ComponentImpl, implementRuntimeComponent } from '@sunmao-ui/runtime';
 import {
   CheckboxPropsSchema as BaseCheckboxPropsSchema,
   CheckboxOptionSchema as BaseCheckboxOptionSchema,
-} from "../generated/types/Checkbox";
-import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
-import { css } from "@emotion/css";
-import { useState, useEffect, useMemo, useCallback } from "react";
+} from '../generated/types/Checkbox';
+import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
+import { css } from '@emotion/css';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 
 const CheckboxPropsSchema = Type.Object({
   ...BaseCheckboxPropsSchema,
@@ -17,9 +17,7 @@ const CheckboxStateSchema = Type.Object({
   isCheckAll: Type.Boolean(),
 });
 
-const CheckboxImpl: ComponentImpl<Static<typeof CheckboxPropsSchema>> = (
-  props
-) => {
+const CheckboxImpl: ComponentImpl<Static<typeof CheckboxPropsSchema>> = props => {
   const { elementRef, mergeState, subscribeMethods, callbackMap, customStyle } = props;
   const {
     options = [],
@@ -128,14 +126,7 @@ const CheckboxImpl: ComponentImpl<Static<typeof CheckboxPropsSchema>> = (
       checkAll,
       uncheckAll,
     });
-  }, [
-    subscribeMethods,
-    mergeState,
-    checkedValues,
-    options,
-    checkAll,
-    uncheckAll,
-  ]);
+  }, [subscribeMethods, mergeState, checkedValues, options, checkAll, uncheckAll]);
 
   const CheckAll = showCheckAll ? (
     <BaseCheckbox
@@ -149,26 +140,14 @@ const CheckboxImpl: ComponentImpl<Static<typeof CheckboxPropsSchema>> = (
   ) : null;
   const CheckboxList =
     options.length > 1 ? (
-      <div>
-        <BaseCheckbox.Group
-          {...checkboxProps}
-          className={css(customStyle?.content)}
-          defaultValue={defaultCheckedValues}
-          value={checkedValues}
-          onChange={onGroupChange}
-        >
-          {options.map((option) => (
-            <BaseCheckbox
-              key={option.value}
-              value={option.value}
-              disabled={option.disabled}
-              indeterminate={option.indeterminate}
-            >
-              {option.label}
-            </BaseCheckbox>
-          ))}
-        </BaseCheckbox.Group>
-      </div>
+      <BaseCheckbox.Group
+        {...checkboxProps}
+        className={css(customStyle?.content)}
+        defaultValue={defaultCheckedValues}
+        value={checkedValues}
+        onChange={onGroupChange}
+        options={options}
+      />
     ) : (
       <BaseCheckbox
         {...checkboxProps}
@@ -191,23 +170,36 @@ const CheckboxImpl: ComponentImpl<Static<typeof CheckboxPropsSchema>> = (
 };
 
 const exampleProperties = {
-  options: [],
-  direction: "horizontal",
-  defaultCheckedValues: [],
+  options: [
+    {
+      label: 'checkbox1',
+      value: 'checkbox1',
+    },
+    {
+      label: 'checkbox2',
+      value: 'checkbox2',
+    },
+    {
+      label: 'checkbox3',
+      value: 'checkbox3',
+    },
+  ],
+  direction: 'horizontal',
+  defaultCheckedValues: ['checkbox1'],
   showCheckAll: false,
-  checkAllText: "Check all",
+  checkAllText: 'Check all',
 };
 
 const options = {
-  version: "arco/v1",
+  version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
-    name: "checkbox",
-    displayName: "Checkbox",
+    name: 'checkbox',
+    displayName: 'Checkbox',
     exampleProperties,
     annotations: {
-      category: "Input",
-    }
+      category: 'Input',
+    },
   },
   spec: {
     properties: CheckboxPropsSchema,
@@ -222,9 +214,9 @@ const options = {
         values: BaseCheckboxOptionSchema,
       }),
     }),
-    styleSlots: ["content"],
+    styleSlots: ['content'],
     slots: [],
-    events: ["onChange"],
+    events: ['onChange'],
   },
 };
 

packages/arco-lib/src/components/Form/FormControl.tsx

@@ -42,7 +42,7 @@ const FormControlImpl: ComponentImpl<Static<typeof FormControlPropsSchema>> = pr
       {slotsElements.content ? (
         slotsElements.content
       ) : (
-        <EmptyPlaceholder componentName="Form Control" />
+        <EmptyPlaceholder componentName="Input" />
       )}
       <FormControlErrorMessage errorMsg={errorMsg} />
     </BaseFormControl>

packages/arco-lib/src/components/Radio.tsx

@@ -1,10 +1,10 @@
-import { Radio as BaseRadio } from "@arco-design/web-react";
-import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
-import { css } from "@emotion/css";
-import { Type, Static } from "@sinclair/typebox";
-import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
-import { RadioPropsSchema as BaseRadioPropsSchema } from "../generated/types/Radio";
-import { useEffect, useState } from "react";
+import { Radio as BaseRadio } from '@arco-design/web-react';
+import { ComponentImpl, implementRuntimeComponent } from '@sunmao-ui/runtime';
+import { css } from '@emotion/css';
+import { Type, Static } from '@sinclair/typebox';
+import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
+import { RadioPropsSchema as BaseRadioPropsSchema } from '../generated/types/Radio';
+import { useEffect, useState } from 'react';
 
 const RadioPropsSchema = Type.Object({
   ...BaseRadioPropsSchema,
@@ -13,11 +13,10 @@ const RadioStateSchema = Type.Object({
   checkedValue: Type.String(),
 });
 
-const RadioImpl: ComponentImpl<Static<typeof RadioPropsSchema>> = (props) => {
-  const { customStyle, callbackMap, mergeState, subscribeMethods } =
-    props;
+const RadioImpl: ComponentImpl<Static<typeof RadioPropsSchema>> = props => {
+  const { customStyle, callbackMap, mergeState, subscribeMethods } = props;
   const { defaultCheckedValue, elementRef, ...cProps } = getComponentProps(props);
-  const [checkedValue, setCheckedValue] = useState<string>("");
+  const [checkedValue, setCheckedValue] = useState<string>('');
   const [isInit, setIsInit] = useState(false);
 
   const onChange = (value: string) => {
@@ -33,7 +32,7 @@ const RadioImpl: ComponentImpl<Static<typeof RadioPropsSchema>> = (props) => {
     }
 
     setIsInit(true);
-  }, [defaultCheckedValue, isInit]);
+  }, [defaultCheckedValue, isInit, mergeState]);
   useEffect(() => {
     subscribeMethods({
       setCheckedValue: ({ value: newCheckedValue }) => {
@@ -59,25 +58,26 @@ const RadioImpl: ComponentImpl<Static<typeof RadioPropsSchema>> = (props) => {
 
 const exampleProperties: Static<typeof RadioPropsSchema> = {
   options: [
-    { label: 'A', value: 'a',disabled: false },
-    { label: 'B', value: 'b',disabled: true },
+    { label: 'A', value: 'a' },
+    { label: 'B', value: 'b' },
+    { label: 'C', value: 'c' },
   ],
-  type: "radio",
-  defaultCheckedValue:'b',
-  direction: "horizontal",
-  size: "default",
+  type: 'radio',
+  defaultCheckedValue: 'a',
+  direction: 'horizontal',
+  size: 'default',
 };
 
 const options = {
-  version: "arco/v1",
+  version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
-    name: "radio",
-    displayName: "Radio",
+    name: 'radio',
+    displayName: 'Radio',
     exampleProperties,
     annotations: {
-      category: "Input",
-    }
+      category: 'Input',
+    },
   },
   spec: {
     properties: RadioPropsSchema,
@@ -88,8 +88,8 @@ const options = {
       }),
     } as Record<string, any>,
     slots: [],
-    styleSlots: ["group"],
-    events: ["onChange"],
+    styleSlots: ['group'],
+    events: ['onChange'],
   },
 };
 

packages/arco-lib/src/generated/types/Checkbox.ts

@@ -18,13 +18,14 @@ export const CheckboxOptionSchema = Type.Array(
 
 export const CheckboxPropsSchema = {
   options: CheckboxOptionSchema,
-  direction: StringUnion(['horizontal', 'vertical'], {
-    title: 'Direction',
-    category: Category.Layout,
-  }),
   defaultCheckedValues: Type.Array(Type.String(), {
     title: 'Default Value',
     category: Category.Data,
+    widget: 'expression',
+  }),
+  direction: StringUnion(['horizontal', 'vertical'], {
+    title: 'Direction',
+    category: Category.Basic,
   }),
   showCheckAll: Type.Boolean({
     title: 'Show Check All',
@@ -32,6 +33,6 @@ export const CheckboxPropsSchema = {
   }),
   checkAllText: Type.String({
     title: 'Check All Text',
-    category: Category.Data,
+    category: Category.Basic,
   }),
 };

packages/arco-lib/src/generated/types/Radio.ts

@@ -1,29 +1,27 @@
-
-import { Type } from "@sinclair/typebox";
+import { Type } from '@sinclair/typebox';
 import { StringUnion } from '../../sunmao-helper';
-import { Category } from '../../constants/category'
-
+import { Category } from '../../constants/category';
 
 const RadioItemSchema = Type.Object({
   value: Type.String(),
   label: Type.String(),
-  disabled: Type.Boolean()
+  disabled: Type.Optional(Type.Boolean()),
 });
 
 export const RadioPropsSchema = {
-  options: Type.Array(RadioItemSchema, {
-    category: Category.Data
-  }),
   defaultCheckedValue: Type.String({
-    category: Category.Data
+    category: Category.Data,
+  }),
+  options: Type.Array(RadioItemSchema, {
+    category: Category.Data,
   }),
   type: StringUnion(['radio', 'button'], {
-    category: Category.Style
+    category: Category.Style,
   }),
   direction: StringUnion(['horizontal', 'vertical'], {
-    category: Category.Style
+    category: Category.Style,
   }),
   size: StringUnion(['small', 'default', 'large', 'mini'], {
-    category: Category.Style
+    category: Category.Style,
   }),
 };