Merge pull request #5 from webzard-io/improve

refactor: remove unnecessary component states and optimize components

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

@@ -61,6 +61,4 @@ const options = {
   },
 };
 
-export const Alert = implementRuntimeComponent(options)(
-  AlertImpl as any
-);
+export const Alert = implementRuntimeComponent(options)(AlertImpl);

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

@@ -1,9 +1,5 @@
 import { Avatar as BaseAvatar } from "@arco-design/web-react";
-import {
-  ComponentImpl,
-  implementRuntimeComponent,
-} from "@sunmao-ui/runtime";
-import { createComponent } from "@sunmao-ui/core";
+import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
 import { css, cx } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
@@ -15,9 +11,7 @@ const AvatarPropsSchema = Type.Object({
 });
 const AvatarStateSchema = Type.Object({});
 
-const AvatarImpl: ComponentImpl<Static<typeof AvatarPropsSchema>> = (
-  props
-) => {
+const AvatarImpl: ComponentImpl<Static<typeof AvatarPropsSchema>> = (props) => {
   const { slotsElements, customStyle } = props;
   const { className, ...cProps } = getComponentProps(props);
 
@@ -56,6 +50,4 @@ const options = {
   },
 };
 
-export const Avatar = implementRuntimeComponent(options)(
-  AvatarImpl as typeof AvatarImpl & undefined
-);
+export const Avatar = implementRuntimeComponent(options)(AvatarImpl);

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

@@ -4,56 +4,25 @@ import { css, cx } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
 import { BadgePropsSchema as BaseBadgePropsSchema } from "../generated/types/Badge";
-import { useState, useEffect } from "react";
 
 const BadgePropsSchema = Type.Object(BaseBadgePropsSchema);
-const BadgeStateSchema = Type.Object({
-  count: Type.Number(),
-  text: Type.String(),
-});
+const BadgeStateSchema = Type.Object({});
 
 const BadgeImpl: ComponentImpl<Static<typeof BadgePropsSchema>> = (props) => {
-  const { className, defaultCount, defaultText, ...cProps } =
-    getComponentProps(props);
-  const { mergeState, customStyle, subscribeMethods, slotsElements } = props;
+  const { className, ...cProps } = getComponentProps(props);
+  const { customStyle, slotsElements } = props;
 
-  const [count, _setCount] = useState(defaultCount);
-  const [text, _setText] = useState(defaultText);
-
-  // TODO
-  // arco如果设置status和color，即使不设置dot=true也会是dot模式，这会造成一些迷惑，所以暂时在这里处理一下
-  // 如果不设置dot=true，status和color就无效
+  // TODO need to be optimized
+  // In arco-design, if `status` and `color` are set, even if `dot` is not set, it will be in dot mode
+  // which will cause some confusion and bug
+  // If `dot` is not set, delete status and color from props
   if (!cProps.dot) {
     Reflect.deleteProperty(cProps, "status");
     Reflect.deleteProperty(cProps, "color");
   }
 
-  useEffect(() => {
-    mergeState({ count });
-  }, [count]);
-
-  useEffect(() => {
-    mergeState({ text });
-  }, [text]);
-
-  useEffect(() => {
-    subscribeMethods({
-      setCount({ count }) {
-        _setCount(count);
-      },
-      setText({ text }) {
-        _setText(text);
-      },
-    });
-  });
-
   return (
-    <BaseBadge
-      className={cx(className, css(customStyle?.content))}
-      {...cProps}
-      count={count}
-      text={text}
-    >
+    <BaseBadge className={cx(className, css(customStyle?.content))} {...cProps}>
       {slotsElements.content}
     </BaseBadge>
   );
@@ -61,9 +30,9 @@ const BadgeImpl: ComponentImpl<Static<typeof BadgePropsSchema>> = (props) => {
 const exampleProperties: Static<typeof BadgePropsSchema> = {
   // TODO handle dotStyle and color
   className: "",
-  defaultCount: 2,
-  defaultText: "",
+  text: "",
   dot: true,
+  count: 1,
   maxCount: 99,
   offset: [6, -2],
   status: "default",
@@ -80,16 +49,11 @@ const options = {
   spec: {
     properties: BadgePropsSchema,
     state: BadgeStateSchema,
-    methods: {
-      setCount: Type.String(),
-      setText: Type.String(),
-    },
+    methods: {},
     slots: ["content"],
     styleSlots: ["content"],
-    events: [""],
+    events: [],
   },
 };
 
-export const Badge = implementRuntimeComponent(options)(
-  BadgeImpl as typeof BadgeImpl & undefined
-);
+export const Badge = implementRuntimeComponent(options)(BadgeImpl);

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

@@ -1,8 +1,5 @@
 import { Button as BaseButton } from "@arco-design/web-react";
-import {
-  ComponentImpl,
-  implementRuntimeComponent,
-} from "@sunmao-ui/runtime";
+import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
 import { css, cx } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
@@ -14,12 +11,10 @@ const ButtonPropsSchema = Type.Object({
 });
 const ButtonStateSchema = Type.Object({});
 
-const ButtonImpl: ComponentImpl<Static<typeof ButtonPropsSchema>> = (
-  props
-) => {
+const ButtonImpl: ComponentImpl<Static<typeof ButtonPropsSchema>> = (props) => {
   const { slotsElements, customStyle, callbackMap } = props;
   const { className, ...cProps } = getComponentProps(props);
-  
+
   return (
     <BaseButton
       className={cx(className, css(customStyle?.content))}
@@ -64,6 +59,4 @@ const options = {
   },
 };
 
-export const Button = implementRuntimeComponent(options)(
-  ButtonImpl as typeof ButtonImpl & undefined
-);
+export const Button = implementRuntimeComponent(options)(ButtonImpl);

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

@@ -3,10 +3,16 @@ import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
 import { css, cx } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
-import { CascaderPropsSchema as BaseCascaderPropsSchema } from "../generated/types/Cascader";
+import {
+  CascaderPropsSchema as BaseCascaderPropsSchema,
+  CascaderValueSchema,
+} from "../generated/types/Cascader";
+import { useState, useEffect } from "react";
 
 const CascaderPropsSchema = Type.Object(BaseCascaderPropsSchema);
-const CascaderStateSchema = Type.Object({});
+const CascaderStateSchema = Type.Object({
+  value: CascaderValueSchema,
+});
 
 type MapItem = {
   [k: string]: Record<string, MapItem>;
@@ -58,53 +64,72 @@ const convertArrToTree = (arr: Array<Array<string>>) => {
 const CascaderImpl: ComponentImpl<Static<typeof CascaderPropsSchema>> = (
   props
 ) => {
-  const { placeholder, controlled, ...cProps } = getComponentProps(props);
-  const {
-    slotsElements,
-    customStyle,
-    className,
-    options,
-  } = props;
+  const { multiple, placeholder, ...cProps } = getComponentProps(props);
+  const { mergeState, slotsElements, customStyle, className, options } = props;
 
   const content = slotsElements.content && slotsElements.content[0];
 
+  const mode: "multiple" | undefined = multiple ? "multiple" : undefined;
+
+  let defaultValue = cProps.defaultValue;
+  if (mode === "multiple" && !Array.isArray(cProps.defaultValue[0])) {
+    defaultValue = [cProps.defaultValue as string[]];
+  }
+
+  const [value, _setValue] = useState(defaultValue);
+
+  // optimize the display when switching from single selection to multiple selection
+  useEffect(() => {
+    if (mode === "multiple" && !Array.isArray(value[0])) {
+      _setValue([value as string[]]);
+    }
+  }, [mode]);
+
+  useEffect(() => {
+    mergeState({ value });
+  }, [value, mergeState]);
+
+  const onChange = (value: (string | string[])[]) => {
+    _setValue(value);
+  };
+
   return (
     <BaseCascader
       className={cx(className, css(customStyle?.content))}
       {...cProps}
+      mode={mode}
+      onChange={onChange}
+      value={value}
       options={convertArrToTree(options)}
       placeholder={placeholder}
     >
       {content}
     </BaseCascader>
-  )
+  );
 };
 
 const CascaderExampleOptions = [
-  ["北京", "朝阳", "大屯里"],
-  ["北京", "海淀", "smartx"],
-  ["北京", "昌平"],
-  ["北京", "望京", "望京soho"],
-  ["上海", "黄埔"],
-  ["上海", "浦口", "川沙", "迪士尼"],
-  ["江苏", "徐州"],
-  ["江苏", "苏州", "姑苏"],
-  ["江苏", "苏州", "工业园"],
-  ["江苏", "南京", "秦淮", "雨花台", "安德门"],
-  ["江苏", "南京", "秦淮", "雨花台", "铁心桥"],
+  ["beijing", "chaoyang", "datunli"],
+  ["beijing", "haidian", "smartx"],
+  ["beijing", "changping"],
+  ["beijing", "wangjing", "soho"],
+  ["shanghai", "huangpu"],
+  ["shanghai", "pukou", "chuansha", "disney"],
+  ["jiangsu", "nanjing", "qinhuai", "yuhuatai", "andemen"],
+  ["jiangsu", "nanjing", "qinhuai", "yuhuatai", "tiexinqiao"],
 ];
 const exampleProperties: Static<typeof CascaderPropsSchema> = {
   className: "",
-  defaultValue: ["北京", "海淀", "smartx"],
+  defaultValue: ["beijing", "haidian", "smartx"],
   expandTrigger: "click",
   changeOnSelect: false,
   unmountOnExit: true,
-  mode:'single' ,
+  multiple: false,
   defaultPopupVisible: false,
   placeholder: "Please select ...",
   bordered: true,
   size: "default",
-  showSearch:false,
+  showSearch: false,
   disabled: false,
   error: false,
   loading: false,
@@ -133,6 +158,4 @@ const options = {
   },
 };
 
-export const Cascader = implementRuntimeComponent(options)(
-  CascaderImpl as typeof CascaderImpl & undefined
-);
+export const Cascader = implementRuntimeComponent(options)(CascaderImpl);

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

@@ -146,4 +146,4 @@ export const CollapseItem = implementRuntimeComponent({
     styleSlots: ["content"],
     events: [],
   },
-})(CollapseItemImpl as typeof CollapseItemImpl & undefined);
+})(CollapseItemImpl);

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

@@ -1,9 +1,5 @@
 import { Divider as BaseDivider } from "@arco-design/web-react";
-import {
-  ComponentImpl,
-  implementRuntimeComponent,
-} from "@sunmao-ui/runtime";
-import { createComponent } from "@sunmao-ui/core";
+import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
 import { css, cx } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
@@ -15,9 +11,9 @@ const DividerPropsSchema = Type.Object({
 });
 const DividerStateSchema = Type.Object({});
 
-const DividerImpl: ComponentImpl<
-  Static<typeof DividerPropsSchema>
-> = (props) => {
+const DividerImpl: ComponentImpl<Static<typeof DividerPropsSchema>> = (
+  props
+) => {
   const { customStyle } = props;
   const { className, ...cProps } = getComponentProps(props);
 
@@ -53,6 +49,4 @@ const options = {
   },
 };
 
-export const Divider = implementRuntimeComponent(options)(
-  DividerImpl as typeof DividerImpl & undefined
-);
+export const Divider = implementRuntimeComponent(options)(DividerImpl);

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

@@ -50,5 +50,5 @@ const options = {
 };
 
 export const Dropdown = implementRuntimeComponent(options)(
-  DropdownImpl as typeof DropdownImpl & undefined
+  DropdownImpl
 );

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

@@ -3,7 +3,6 @@ import {
   ComponentImpl,
   implementRuntimeComponent,
 } from "@sunmao-ui/runtime";
-import { createComponent } from "@sunmao-ui/core";
 import { css } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
@@ -53,4 +52,4 @@ const options = {
     events: [],
   },
 };
-export const Image = implementRuntimeComponent(options)(ImageImpl as typeof ImageImpl & undefined);
+export const Image = implementRuntimeComponent(options)(ImageImpl);

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

@@ -1,8 +1,5 @@
 import { Input as BaseInput } from "@arco-design/web-react";
-import {
-  ComponentImpl,
-  implementRuntimeComponent,
-} from "@sunmao-ui/runtime";
+import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
 import { css, cx } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
@@ -17,9 +14,7 @@ const InputStateSchema = Type.Object({
   value: Type.String(),
 });
 
-const InputImpl: ComponentImpl<Static<typeof InputPropsSchema>> = (
-  props
-) => {
+const InputImpl: ComponentImpl<Static<typeof InputPropsSchema>> = (props) => {
   const { slotsElements, customStyle, callbackMap, mergeState } = props;
   const { className, defaultValue, ...cProps } = getComponentProps(props);
   const [value, setValue] = useState(defaultValue);
@@ -78,6 +73,4 @@ const options = {
   },
 };
 
-export const Input = implementRuntimeComponent(options)(
-  InputImpl as typeof InputImpl & undefined
-);
+export const Input = implementRuntimeComponent(options)(InputImpl);

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

@@ -2,10 +2,7 @@ import { Layout as BaseLayout } 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 { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
 import {
   HeaderPropsSchema as BaseHeaderPropsSchema,
   FooterPropsSchema as BaseFooterPropsSchema,
@@ -20,7 +17,6 @@ const LayoutStateSchema = Type.Object({});
 const LayoutImpl: ComponentImpl<Static<typeof LayoutPropsSchema>> = (props) => {
   const { slotsElements, customStyle } = props;
   const cProps = getComponentProps(props);
-  console.log('layout', slotsElements)
   return (
     <BaseLayout className={css(customStyle?.content)} {...cProps}>
       {slotsElements.content}
@@ -330,4 +326,4 @@ export const Sider = implementRuntimeComponent({
     styleSlots: ["content"],
     events: [],
   },
-})(SiderImpl as typeof SiderImpl & undefined);
+})(SiderImpl);

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

@@ -51,6 +51,4 @@ const options = {
   },
 };
 
-export const Link = implementRuntimeComponent(options)(
-  LinkImpl as typeof LinkImpl & undefined
-);
+export const Link = implementRuntimeComponent(options)(LinkImpl);

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

@@ -81,6 +81,4 @@ const options = {
   },
 };
 
-export const Mentions = implementRuntimeComponent(options)(
-  MentionsImpl as typeof MentionsImpl & undefined
-);
+export const Mentions = implementRuntimeComponent(options)(MentionsImpl);

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

@@ -1,8 +1,5 @@
 import { Menu as BaseMenu } from "@arco-design/web-react";
-import {
-  ComponentImpl,
-  implementRuntimeComponent,
-} from "@sunmao-ui/runtime";
+import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
 import { css, cx } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
@@ -26,9 +23,7 @@ const MenuStateSchema = Type.Object({
   activeKey: Type.Optional(Type.String()),
 });
 
-const MenuImpl: ComponentImpl<Static<typeof MenuPropsSchema>> = (
-  props
-) => {
+const MenuImpl: ComponentImpl<Static<typeof MenuPropsSchema>> = (props) => {
   const { customStyle, callbackMap, mergeState } = props;
   const { items = [], className, ...cProps } = getComponentProps(props);
   const [activeKey, setActiveKey] = useState<string>();
@@ -88,4 +83,4 @@ export const Menu = implementRuntimeComponent({
     styleSlots: ["content"],
     events: ["onClick"],
   },
-})(MenuImpl as typeof MenuImpl & undefined);
+})(MenuImpl);

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

@@ -31,10 +31,10 @@ const PopoverImpl: ComponentImpl<Static<typeof PopoverPropsSchema>> = (
         _setPopupVisible(!!visible);
       },
     });
-  }, []);
+  }, [subscribeMethods]);
   useEffect(() => {
     mergeState({ visible: popupVisible });
-  }, [popupVisible]);
+  }, [popupVisible, mergeState]);
 
   // TODO only support arco componets slot now (same as Tooltip)
   const content = slotsElements.content && slotsElements.content[0];
@@ -45,11 +45,11 @@ const PopoverImpl: ComponentImpl<Static<typeof PopoverPropsSchema>> = (
       {...cProps}
       content={slotsElements.popupContent}
       popupVisible={popupVisible}
-      onVisibleChange={(visible)=>{
-        if(visible){
-          _setPopupVisible(true)
+      onVisibleChange={(visible) => {
+        if (visible) {
+          _setPopupVisible(true);
         }
-    }}
+      }}
     >
       {content}
     </BasePopover>
@@ -76,7 +76,7 @@ const exampleProperties: Static<typeof PopoverPropsSchema> = {
   content: "This is Popover",
   controlled: false,
   trigger: "hover",
-  title:'Title'
+  title: "Title",
 };
 
 const options = {
@@ -93,12 +93,10 @@ const options = {
     methods: {
       setPopupVisible: Type.String(),
     },
-    slots: ["popupContent",'content'],
+    slots: ["popupContent", "content"],
     styleSlots: ["content"],
     events: [],
   },
 };
 
-export const Popover = implementRuntimeComponent(options)(
-  PopoverImpl as typeof PopoverImpl & undefined
-);
+export const Popover = implementRuntimeComponent(options)(PopoverImpl);

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

@@ -1,47 +1,31 @@
 import { Progress as BaseProgress } from "@arco-design/web-react";
-import {
-  ComponentImpl,
-  implementRuntimeComponent,
-} from "@sunmao-ui/runtime";
+import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
 import { css, cx } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
 import { ProgressPropsSchema as BaseProgressPropsSchema } from "../generated/types/Progress";
-import { useState, useEffect } from "react";
 
 const ProgressPropsSchema = Type.Object(BaseProgressPropsSchema);
-const ProgressStateSchema = Type.Object({
-  percent: Type.String(),
-});
+const ProgressStateSchema = Type.Object({});
 
-const ProgressImpl: ComponentImpl<
-  Static<typeof ProgressPropsSchema>
-> = (props) => {
+const ProgressImpl: ComponentImpl<Static<typeof ProgressPropsSchema>> = (
+  props
+) => {
   const { className, ...cProps } = getComponentProps(props);
-  const {
-    mergeState,
-    defaultPercent,
-    customStyle,
-    subscribeMethods,
-  } = props;
-  const [percent, _setPercent] = useState(defaultPercent);
+  const { customStyle } = props;
 
-  useEffect(() => {
-    mergeState({percent});
-  }, [percent]);
-
-  subscribeMethods({
-    setPercent({percent}) {
-      _setPercent(percent)
-    },
-  });
+  let steps = 0;
+  // step cannot be negative
+  if (cProps.steps && cProps.steps > 0) {
+    steps = cProps.steps;
+  }
 
   return (
-      <BaseProgress
-        percent={percent}
-        className={cx(className, css(customStyle?.content))}
-        {...cProps}
-      />
+    <BaseProgress
+      className={cx(className, css(customStyle?.content))}
+      {...cProps}
+      steps={steps}
+    />
   );
 };
 const exampleProperties: Static<typeof ProgressPropsSchema> = {
@@ -53,7 +37,7 @@ const exampleProperties: Static<typeof ProgressPropsSchema> = {
   color: "red",
   trailColor: "blue",
   showText: true,
-  defaultPercent: 0,
+  percent: 0,
   width: 100,
   size: "default",
   buffer: false,
@@ -71,15 +55,11 @@ const options = {
   spec: {
     properties: ProgressPropsSchema,
     state: ProgressStateSchema,
-    methods: {
-      setPercent: Type.String(),
-    },
+    methods: {},
     slots: [],
     styleSlots: ["content"],
-    events: ["setPercent"],
+    events: [],
   },
 };
 
-export const Progress = implementRuntimeComponent(options)(
-  ProgressImpl as typeof ProgressImpl & undefined
-);
+export const Progress = implementRuntimeComponent(options)(ProgressImpl);

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

@@ -101,4 +101,4 @@ export const Select = implementRuntimeComponent({
     styleSlots: ["content"],
     events: ["onChange"],
   },
-})(SelectImpl as typeof SelectImpl & undefined);
+})(SelectImpl);

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

@@ -4,44 +4,20 @@ import { css, cx } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import { FALLBACK_METADATA, getComponentProps } from "../sunmao-helper";
 import { SkeletonPropsSchema as BaseSkeletonPropsSchema } from "../generated/types/Skeleton";
-import { useState, useEffect } from "react";
 
 const SkeletonPropsSchema = Type.Object(BaseSkeletonPropsSchema);
-const SkeletonStateSchema = Type.Object({
-  loading: Type.Boolean(),
-});
+const SkeletonStateSchema = Type.Object({});
 
 const SkeletonImpl: ComponentImpl<Static<typeof SkeletonPropsSchema>> = (
   props
 ) => {
-  const { defaultLoading, ...cProps } = getComponentProps(props);
-  const {
-    customStyle,
-    className,
-    slotsElements,
-    mergeState,
-    subscribeMethods,
-  } = props;
-
-  const [loading, _setLoading] = useState(defaultLoading);
-
-  useEffect(() => {
-    mergeState({ loading });
-  }, [loading]);
-
-  useEffect(() => {
-    subscribeMethods({
-      setLoading({ loading }) {
-        _setLoading(loading);
-      },
-    });
-  }, []);
+  const { ...cProps } = getComponentProps(props);
+  const { customStyle, className, slotsElements } = props;
 
   return (
     <BaseSkeleton
       className={cx(className, css(customStyle?.content))}
       {...cProps}
-      loading={loading}
     >
       {slotsElements.content}
     </BaseSkeleton>
@@ -51,7 +27,7 @@ const SkeletonImpl: ComponentImpl<Static<typeof SkeletonPropsSchema>> = (
 const exampleProperties: Static<typeof SkeletonPropsSchema> = {
   className: "",
   animation: true,
-  defaultLoading: true,
+  loading: true,
   image: false,
   text: { rows: 3, width: ["100%", 600, 400] },
 };
@@ -67,15 +43,11 @@ const options = {
   spec: {
     properties: SkeletonPropsSchema,
     state: SkeletonStateSchema,
-    methods: {
-      setLoading: Type.String(),
-    },
+    methods: {},
     slots: ["content"],
     styleSlots: ["content"],
     events: [],
   },
 };
 
-export const Skeleton = implementRuntimeComponent(options)(
-  SkeletonImpl as typeof SkeletonImpl & undefined
-);
+export const Skeleton = implementRuntimeComponent(options)(SkeletonImpl);

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

@@ -1,8 +1,5 @@
 import { Space as BaseSpace } from "@arco-design/web-react";
-import {
-  ComponentImpl,
-  implementRuntimeComponent,
-} from "@sunmao-ui/runtime";
+import { ComponentImpl, implementRuntimeComponent } from "@sunmao-ui/runtime";
 import { css } from "@emotion/css";
 import { Type, Static } from "@sinclair/typebox";
 import {
@@ -21,9 +18,7 @@ const SpacePropsSchema = Type.Object({
 });
 const SpaceStateSchema = Type.Object({});
 
-const SpaceImpl: ComponentImpl<Static<typeof SpacePropsSchema>> = (
-  props
-) => {
+const SpaceImpl: ComponentImpl<Static<typeof SpacePropsSchema>> = (props) => {
   const { slotsElements, customStyle } = props;
   const cProps = getComponentProps(props);
 
@@ -56,4 +51,4 @@ export const Space = implementRuntimeComponent({
     styleSlots: ["content"],
     events: ["onClick"],
   },
-})(SpaceImpl as typeof SpaceImpl & undefined);
+})(SpaceImpl);

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

@@ -82,6 +82,4 @@ const options = {
   },
 };
 
-export const Timeline = implementRuntimeComponent(options)(
-  TimelineImpl as typeof TimelineImpl & undefined
-);
+export const Timeline = implementRuntimeComponent(options)(TimelineImpl);

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

@@ -70,7 +70,7 @@ const exampleProperties: Static<typeof TooltipPropsSchema> = {
   disabled: false,
   content: "This is tooltip",
   controlled: false,
-  trigger:['hover','click']
+  trigger: ["hover", "click"],
 };
 
 const options = {
@@ -93,6 +93,4 @@ const options = {
   },
 };
 
-export const Tooltip = implementRuntimeComponent(options)(
-  TooltipImpl as typeof TooltipImpl & undefined
-);
+export const Tooltip = implementRuntimeComponent(options)(TooltipImpl);

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

@@ -114,6 +114,4 @@ const options = {
   },
 };
 
-export const TreeSelect = implementRuntimeComponent(options)(
-  TreeSelectImpl as typeof TreeSelectImpl & undefined
-);
+export const TreeSelect = implementRuntimeComponent(options)(TreeSelectImpl);

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

@@ -1,6 +1,6 @@
 
 import { Type } from "@sinclair/typebox";
-import { IntoStringUnion, StringUnion } from '../../sunmao-helper';
+import { StringUnion } from '../../sunmao-helper';
 
 export const AvatarPropsSchema = {
   'shape': Type.Optional(StringUnion(['circle', 'square'])),

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

@@ -4,10 +4,9 @@ import { StringUnion } from '../../sunmao-helper';
 
 export const BadgePropsSchema = {
     className: Type.Optional(Type.String()),
-    defaultCount: Type.Optional(Type.Number()),
-    defaultText: Type.Optional(Type.String()),
+    text:Type.Optional(Type.String()),
+    count:Type.Optional(Type.Number()),
     dot: Type.Optional(Type.Boolean()),
-    dotStyle: Type.Optional(Type.String()),
     maxCount: Type.Optional(Type.Number()),
     offset: Type.Optional(Type.Tuple([Type.Number(), Type.Number()])),
     color: Type.Optional(StringUnion(['red', 'orangered', 'orange', 'gold', 'lime', 'green', 'cyan', 'arcoblue', 'purple', 'pinkpurple', 'magenta', 'gray'])),

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

@@ -2,15 +2,16 @@
 import { Type } from '@sinclair/typebox';
 import { StringUnion } from '../../sunmao-helper';
 
+export const CascaderValueSchema = Type.Array(Type.Union([Type.String(), Type.Array(Type.String())]))
+
 export const CascaderPropsSchema = {
     className: Type.Optional(Type.String()),
-    defaultValue: Type.Union([Type.String(), Type.Array(Type.String())]),
-    expandTrigger: StringUnion(['click','hover']),
+    expandTrigger: StringUnion(['click', 'hover']),
     changeOnSelect: Type.Optional(Type.Boolean()),
     unmountOnExit: Type.Optional(Type.Boolean()),
-    mode: StringUnion(['multiple','single']),
+    multiple: Type.Boolean(),
     defaultPopupVisible: Type.Optional(Type.Boolean()),
-    showSearch:Type.Optional(Type.Boolean()),
+    showSearch: Type.Optional(Type.Boolean()),
     placeholder: Type.Optional(Type.String()),
     bordered: Type.Optional(Type.Boolean()),
     size: Type.Optional(StringUnion(['mini', 'small', 'default', 'large'])),
@@ -21,5 +22,6 @@ export const CascaderPropsSchema = {
     allowCreate: Type.Optional(Type.Boolean()),
     maxTagCount: Type.Optional(Type.Number()),
     animation: Type.Boolean(),
+    defaultValue: CascaderValueSchema,
     options: Type.Array(Type.Array(Type.String())),
 }

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

@@ -12,7 +12,7 @@ export const ProgressPropsSchema = {
     color: Type.Optional(Type.Union([Type.String(), Type.Object({ key: Type.String() })])),
     trailColor:Type.Optional(Type.String()),
     showText:Type.Optional(Type.Boolean()),
-    defaultPercent: Type.Number(),
+    percent: Type.Number(),
     width:Type.Optional(Type.Union([Type.String(),Type.Number()])),
     size:Type.Optional(StringUnion(['small' , 'default' , 'mini' , 'large'])),
     buffer:Type.Optional(Type.Boolean()),

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

@@ -21,7 +21,7 @@ export const SkeletonImagePropsSchema = {
 export const SkeletonPropsSchema = {
     className: Type.Optional(Type.String()),
     animation: Type.Optional(Type.Boolean()),
-    defaultLoading: Type.Optional(Type.Boolean()),
+    loading: Type.Optional(Type.Boolean()),
     image: Type.Optional(Type.Union([
         Type.Boolean(),
         Type.Object(SkeletonImagePropsSchema)