refactor: add useStateValue hook to handle default value

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

@@ -17,7 +17,7 @@ const exampleProperties: Static<typeof AlertPropsSpec> = {
   type: 'info',
 };
 
-const options = {
+export const Alert = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -36,9 +36,7 @@ const options = {
     styleSlots: ['content'],
     events: ['onClose', 'afterClose'],
   },
-};
-
-export const Alert = implementRuntimeComponent(options)(props => {
+})(props => {
   const { ...cProps } = getComponentProps(props);
   const { elementRef, customStyle, slotsElements, callbackMap } = props;
 

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

@@ -17,7 +17,7 @@ const exampleProperties: Static<typeof AvatarPropsSpec> = {
   type: 'text',
 };
 
-const options = {
+export const Avatar = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -36,9 +36,7 @@ const options = {
     styleSlots: ['content'],
     events: ['onClick'],
   },
-};
-
-export const Avatar = implementRuntimeComponent(options)(props => {
+})(props => {
   const { slotsElements, elementRef, callbackMap, customStyle } = props;
   const { type, src, text, ...cProps } = getComponentProps(props);
 

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

@@ -16,7 +16,7 @@ const exampleProperties: Static<typeof BadgePropsSpec> = {
   offset: [6, -2],
 };
 
-const options = {
+export const Badge = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -35,9 +35,7 @@ const options = {
     styleSlots: ['content'],
     events: [],
   },
-};
-
-export const Badge = implementRuntimeComponent(options)(props => {
+})(props => {
   const { ...cProps } = getComponentProps(props);
   const { elementRef, customStyle, slotsElements } = props;
 

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

@@ -21,7 +21,7 @@ const exampleProperties: Static<typeof ButtonPropsSpec> = {
   text: 'button',
 };
 
-const options = {
+export const Button = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -40,9 +40,7 @@ const options = {
     styleSlots: ['content'],
     events: ['onClick'],
   },
-};
-
-export const Button = implementRuntimeComponent(options)(props => {
+})(props => {
   const { elementRef, slotsElements, customStyle, text, callbackMap } = props;
   const { ...cProps } = getComponentProps(props);
 

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

@@ -64,17 +64,12 @@ const convertArrToTree = (arr: Array<Array<string>>) => {
 };
 
 const CascaderExampleOptions = [
-  ['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'],
+  ['Beijing', 'Dongcheng District', 'The Forbidden City'],
+  ['Shanghai', 'Pukou', 'Disney'],
+  ['Zhejiang', 'Hangzhou', 'The West Lake'],
 ];
 const exampleProperties: Static<typeof CascaderPropsSpec> = {
-  defaultValue: ['beijing', 'haidian', 'smartx'],
+  defaultValue: ['Zhejiang', 'Hangzhou', 'The West Lake'],
   expandTrigger: 'click',
   multiple: false,
   placeholder: 'Please select ...',
@@ -89,7 +84,7 @@ const exampleProperties: Static<typeof CascaderPropsSpec> = {
   options: CascaderExampleOptions,
 };
 
-const options = {
+export const Cascader = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -105,9 +100,7 @@ const options = {
     styleSlots: ['content'],
     events: ['onChange'],
   },
-};
-
-export const Cascader = implementRuntimeComponent(options)(props => {
+})(props => {
   const { getElement, callbackMap, mergeState, slotsElements, customStyle } = props;
 
   const { multiple, options, placeholder, ...cProps } = getComponentProps(props);

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

@@ -7,7 +7,8 @@ import {
 } from '../generated/types/Checkbox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { css } from '@emotion/css';
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useEffect, useMemo, useCallback } from 'react';
+import { useStateValue } from '../hooks/useStateValue';
 
 const CheckboxPropsSpec = Type.Object({
   ...BaseCheckboxPropsSpec,
@@ -36,9 +37,10 @@ const exampleProperties = {
   defaultCheckedValues: ['checkbox1'],
   showCheckAll: false,
   checkAllText: 'Check all',
+  updateWhenDefaultValueChanges: false,
 };
 
-const options = {
+export const Checkbox = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -66,19 +68,23 @@ const options = {
     slots: [],
     events: ['onChange'],
   },
-};
-
-export const Checkbox = implementRuntimeComponent(options)(props => {
+})(props => {
   const { elementRef, mergeState, subscribeMethods, callbackMap, customStyle } = props;
   const {
+    updateWhenDefaultValueChanges,
     options = [],
     defaultCheckedValues,
     showCheckAll,
     checkAllText,
     ...checkboxProps
   } = getComponentProps(props);
-  const [checkedValues, setCheckedValues] = useState<string[]>([]);
-  const [isInit, setIsInit] = useState<boolean>(false);
+
+  const [checkedValues, setCheckedValues] = useStateValue<string[]>(
+    defaultCheckedValues,
+    mergeState,
+    updateWhenDefaultValueChanges,
+    'checkedValues'
+  );
   const enabledOptions = useMemo(
     () => options.filter(({ disabled }) => !disabled),
     [options]
@@ -135,16 +141,6 @@ export const Checkbox = implementRuntimeComponent(options)(props => {
     }
   };
 
-  useEffect(() => {
-    if (!isInit) {
-      setIsInit(true);
-      setCheckedValues(defaultCheckedValues);
-      mergeState({
-        checkedValues: defaultCheckedValues,
-      });
-    }
-  }, [defaultCheckedValues, mergeState, isInit]);
-
   useEffect(() => {
     subscribeMethods({
       setCheckedValues: ({ checkedValues: newCheckedValues }) => {

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

@@ -4,8 +4,9 @@ import { css } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { CollapsePropsSpec as BaseCollapsePropsSpec } from '../generated/types/Collapse';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import { EmptyPlaceholder } from './_internal/EmptyPlaceholder';
+import { useStateValue } from '../hooks/useStateValue';
 
 const CollapsePropsSpec = Type.Object(BaseCollapsePropsSpec);
 const CollapseStateSpec = Type.Object({
@@ -28,6 +29,7 @@ const exampleProperties: Static<typeof CollapsePropsSpec> = {
       showExpandIcon: true,
     },
   ],
+  updateWhenDefaultValueChanges: false,
   accordion: false,
   expandIconPosition: 'left',
   bordered: false,
@@ -35,7 +37,7 @@ const exampleProperties: Static<typeof CollapsePropsSpec> = {
   lazyLoad: true,
 };
 
-const options = {
+export const Collapse = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -53,13 +55,17 @@ const options = {
     styleSlots: ['content'],
     events: ['onChange'],
   },
-};
-
-export const Collapse = implementRuntimeComponent(options)(props => {
-  const { defaultActiveKey, options, ...cProps } = getComponentProps(props);
+})(props => {
+  const { defaultActiveKey, options, updateWhenDefaultValueChanges, ...cProps } =
+    getComponentProps(props);
   const { elementRef, mergeState, slotsElements, customStyle, callbackMap } = props;
 
-  const [activeKey, setActiveKey] = useState<string[]>(defaultActiveKey.map(String));
+  const [activeKey, setActiveKey] = useStateValue<string[]>(
+    defaultActiveKey.map(String),
+    mergeState,
+    updateWhenDefaultValueChanges,
+    'activeKey'
+  );
 
   const onChange = useCallback(
     (currentOperateKey: string, activeKey: string[]) => {

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

@@ -66,7 +66,7 @@ export const DatePicker = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
-    name: 'DatePicker',
+    name: 'datePicker',
     displayName: 'DatePicker',
     exampleProperties,
     annotations: {

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

@@ -45,7 +45,7 @@ const exampleProperties: Static<typeof DescriptionPropsSpec> = {
   column: 2,
 };
 
-const options = {
+export const Descriptions = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -64,10 +64,8 @@ const options = {
     styleSlots: ['content'],
     events: [],
   },
-};
-
-export const Descriptions = implementRuntimeComponent(options)(props => {
-  const { data,...cProps } = getComponentProps(props);
+})(props => {
+  const { data, ...cProps } = getComponentProps(props);
   const { customStyle } = props;
 
   return (

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

@@ -15,7 +15,7 @@ const exampleProperties: Static<typeof DividerPropsSpec> = {
   orientation: 'center',
 };
 
-const options = {
+export const Divider = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -34,9 +34,7 @@ const options = {
     styleSlots: ['content'],
     events: [],
   },
-};
-
-export const Divider = implementRuntimeComponent(options)(props => {
+})(props => {
   const { elementRef, customStyle } = props;
   const { ...cProps } = getComponentProps(props);
 

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

@@ -21,15 +21,15 @@ const exampleProperties: Static<typeof DropdownPropsSpec> = {
   disabled: false,
   defaultPopupVisible: false,
   list: [
-    { key: '1', label: 'smartx' },
-    { key: '2', label: 'baidu' },
-    { key: '3', label: 'tencent' },
+    { key: '1', label: 'Menu item 1' },
+    { key: '2', label: 'Menu item 2' },
+    { key: '3', label: 'Menu item 3' },
   ],
   autoAlignPopupWidth: true,
   unmountOnExit: false,
 };
 
-const options = {
+export const Dropdown = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -48,9 +48,7 @@ const options = {
     styleSlots: [],
     events: ['onClickMenuItem', 'onVisibleChange', 'onButtonClick'],
   },
-};
-
-export const Dropdown = implementRuntimeComponent(options)(props => {
+})(props => {
   const { elementRef, slotsElements, callbackMap, mergeState } = props;
   const cProps = getComponentProps(props);
   const { list, dropdownType, autoAlignPopupWidth, ...restProps } = cProps;

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

@@ -4,8 +4,9 @@ import { css } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { InputPropsSpec as BaseInputPropsSpec } from '../generated/types/Input';
-import { useEffect, useState, useRef, useCallback } from 'react';
+import { useEffect, useRef, useCallback } from 'react';
 import { RefInputType } from '@arco-design/web-react/es/Input/interface';
+import { useStateValue } from '../hooks/useStateValue';
 
 const InputPropsSpec = Type.Object({
   ...BaseInputPropsSpec,
@@ -47,17 +48,16 @@ const options = {
 };
 
 export const Input = implementRuntimeComponent(options)(props => {
-  const {
-    getElement,
-    updateWhenDefaultValueChanges,
-    slotsElements,
-    customStyle,
-    callbackMap,
-    mergeState,
-  } = props;
-  const { defaultValue, ...cProps } = getComponentProps(props);
+  const { getElement, slotsElements, customStyle, callbackMap, mergeState } = props;
+
+  const { updateWhenDefaultValueChanges, defaultValue, ...cProps } =
+    getComponentProps(props);
   const ref = useRef<RefInputType | null>(null);
-  const [value, setValue] = useState(defaultValue);
+  const [value, setValue] = useStateValue(
+    defaultValue,
+    mergeState,
+    updateWhenDefaultValueChanges
+  );
 
   useEffect(() => {
     const ele = ref.current?.dom;
@@ -66,13 +66,6 @@ export const Input = implementRuntimeComponent(options)(props => {
     }
   }, [getElement, ref]);
 
-  useEffect(() => {
-    if (updateWhenDefaultValueChanges) {
-      setValue(defaultValue);
-      mergeState({ value: defaultValue });
-    }
-  }, [defaultValue, updateWhenDefaultValueChanges]);
-
   const onChange = useCallback(
     value => {
       setValue(value);

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

@@ -4,7 +4,8 @@ import { css } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { MentionsPropsSpec as BaseMentionsPropsSpec } from '../generated/types/Mentions';
-import { useState, useCallback } from 'react';
+import { useCallback } from 'react';
+import { useStateValue } from '../hooks/useStateValue';
 
 const MentionsPropsSpec = Type.Object(BaseMentionsPropsSpec);
 const MentionsStateSpec = Type.Object({
@@ -12,8 +13,8 @@ const MentionsStateSpec = Type.Object({
 });
 
 const exampleProperties: Static<typeof MentionsPropsSpec> = {
-  defaultValue: 'smartx',
-  options: ['smartx', 'byte and dance', 'baidu'],
+  defaultValue: 'option1',
+  options: ['option1', 'option2', 'option3'],
   prefix: '@',
   position: 'bl',
   split: ' ',
@@ -21,9 +22,10 @@ const exampleProperties: Static<typeof MentionsPropsSpec> = {
   allowClear: true,
   disabled: false,
   placeholder: 'you can mentions sb by prefix "@"',
+  updateWhenDefaultValueChanges: false,
 };
 
-const options = {
+export const Mentions = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -39,13 +41,16 @@ const options = {
     styleSlots: ['content'],
     events: ['onChange', 'onClear', 'onPressEnter', 'onFocus', 'onBlur'],
   },
-};
-
-export const Mentions = implementRuntimeComponent(options)(props => {
-  const { defaultValue, ...cProps } = getComponentProps(props);
+})(props => {
+  const { defaultValue, updateWhenDefaultValueChanges, ...cProps } =
+    getComponentProps(props);
   const { elementRef, mergeState, customStyle, callbackMap } = props;
 
-  const [value, setValue] = useState(defaultValue);
+  const [value, setValue] = useStateValue(
+    defaultValue,
+    mergeState,
+    updateWhenDefaultValueChanges
+  );
 
   const onChange = useCallback(
     (value: string) => {

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

@@ -4,7 +4,8 @@ import { css } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { MenuPropsSpec as BaseMenuPropsSpec } from '../generated/types/Menu';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import { useStateValue } from '../hooks/useStateValue';
 
 const MenuPropsSpec = Type.Object({
   ...BaseMenuPropsSpec,
@@ -25,6 +26,7 @@ const exampleProperties: Static<typeof MenuPropsSpec> = {
   ],
   ellipsis: false,
   defaultActiveKey: 'key1',
+  updateWhenDefaultValueChanges: false,
 };
 
 export const Menu = implementRuntimeComponent({
@@ -49,12 +51,18 @@ export const Menu = implementRuntimeComponent({
   },
 })(props => {
   const { elementRef, customStyle, callbackMap, mergeState, subscribeMethods } = props;
-  const { items = [], defaultActiveKey, ...cProps } = getComponentProps(props);
-  const [activeKey, setActiveKey] = useState<string>(defaultActiveKey);
-
-  useEffect(() => {
-    setActiveKey(defaultActiveKey ?? 0);
-  }, [defaultActiveKey]);
+  const {
+    items = [],
+    defaultActiveKey,
+    updateWhenDefaultValueChanges,
+    ...cProps
+  } = getComponentProps(props);
+  const [activeKey, setActiveKey] = useStateValue(
+    defaultActiveKey ?? 0,
+    mergeState,
+    updateWhenDefaultValueChanges,
+    'activeKey'
+  );
 
   useEffect(() => {
     subscribeMethods({

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

@@ -4,7 +4,7 @@ import { css, cx } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { PaginationPropsSpec as BasePaginationPropsSpec } from '../generated/types/Pagination';
-import { useEffect, useState } from 'react';
+import { useStateValue } from 'src/hooks/useStateValue';
 
 const PaginationPropsSpec = Type.Object(BasePaginationPropsSpec);
 const PaginationStateSpec = Type.Object({
@@ -22,9 +22,10 @@ const exampleProperties: Static<typeof PaginationPropsSpec> = {
   simple: false,
   showJumper: false,
   showTotal: false,
+  updateWhenDefaultValueChanges: false,
 };
 
-const options = {
+export const Pagination = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -43,22 +44,22 @@ const options = {
     styleSlots: ['content'],
     events: ['onChange'],
   },
-};
-
-export const Pagination = implementRuntimeComponent(options)(props => {
-  const { defaultCurrent, ...cProps } = getComponentProps(props);
+})(props => {
+  const { defaultCurrent, updateWhenDefaultValueChanges, ...cProps } =
+    getComponentProps(props);
   const { elementRef, customStyle, mergeState, callbackMap } = props;
 
-  const [current, setCurrent] = useState<number>(defaultCurrent || 0);
+  const [current, setCurrent] = useStateValue<number>(
+    defaultCurrent || 0,
+    mergeState,
+    updateWhenDefaultValueChanges,
+    'currentPage'
+  );
 
   if (cProps.sizeCanChange) {
     Reflect.deleteProperty(cProps, 'pageSize');
   }
 
-  useEffect(() => {
-    mergeState({ currentPage: current });
-  }, []);
-
   const handleChange = (pageNum: number) => {
     setCurrent(pageNum);
     mergeState({ currentPage: pageNum });

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

@@ -24,7 +24,7 @@ const exampleProperties: Static<typeof InputPropsSpec> = {
   visibilityToggle: true,
 };
 
-const options = {
+export const PasswordInput = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -43,9 +43,7 @@ const options = {
     styleSlots: ['input'],
     events: ['onChange', 'onBlur', 'onFocus', 'onPressEnter'],
   },
-};
-
-export const PasswordInput = implementRuntimeComponent(options)(props => {
+})(props => {
   const { getElement, customStyle, callbackMap, mergeState } = props;
   const { ...cProps } = getComponentProps(props);
   const [value, setValue] = useState('');

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

@@ -19,7 +19,7 @@ const exampleProperties: Static<typeof PopoverPropsSpec> = {
   unmountOnExit: false,
 };
 
-const options = {
+export const Popover = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -41,9 +41,7 @@ const options = {
     styleSlots: ['content'],
     events: [],
   },
-};
-
-export const Popover = implementRuntimeComponent(options)(props => {
+})(props => {
   const { controlled, ...cProps } = getComponentProps(props);
   const { subscribeMethods, elementRef, slotsElements, customStyle } = props;
 

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

@@ -17,10 +17,10 @@ const exampleProperties: Static<typeof ProgressPropsSpec> = {
   percent: 20,
   width: 100,
   size: 'default',
-  animation:false,
+  animation: false,
 };
 
-const options = {
+export const Progress = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -39,13 +39,16 @@ const options = {
     styleSlots: ['content'],
     events: [],
   },
-};
-
-export const Progress = implementRuntimeComponent(options)(props => {
-  const { color,...cProps } = getComponentProps(props);
+})(props => {
+  const { color, ...cProps } = getComponentProps(props);
   const { customStyle, elementRef } = props;
 
   return (
-    <BaseProgress ref={elementRef} color={cProps.status==='normal'?color:''} className={css(customStyle?.content)} {...cProps} />
+    <BaseProgress
+      ref={elementRef}
+      color={cProps.status === 'normal' ? color : ''}
+      className={css(customStyle?.content)}
+      {...cProps}
+    />
   );
 });

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

@@ -4,7 +4,8 @@ import { css } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { RadioPropsSpec as BaseRadioPropsSpec } from '../generated/types/Radio';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
+import { useStateValue } from 'src/hooks/useStateValue';
 
 const RadioPropsSpec = Type.Object({
   ...BaseRadioPropsSpec,
@@ -23,9 +24,10 @@ const exampleProperties: Static<typeof RadioPropsSpec> = {
   defaultCheckedValue: 'a',
   direction: 'horizontal',
   size: 'default',
+  updateWhenDefaultValueChanges: false,
 };
 
-const options = {
+export const Radio = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -48,13 +50,16 @@ const options = {
     styleSlots: ['group'],
     events: ['onChange'],
   },
-};
-
-export const Radio = implementRuntimeComponent(options)(props => {
+})(props => {
   const { customStyle, callbackMap, mergeState, subscribeMethods, elementRef } = props;
-  const { defaultCheckedValue, ...cProps } = getComponentProps(props);
-  const [checkedValue, setCheckedValue] = useState<string>('');
-  const [isInit, setIsInit] = useState(false);
+  const { defaultCheckedValue, updateWhenDefaultValueChanges, ...cProps } =
+    getComponentProps(props);
+  const [checkedValue, setCheckedValue] = useStateValue<string>(
+    defaultCheckedValue,
+    mergeState,
+    updateWhenDefaultValueChanges,
+    'checkedValue'
+  );
 
   const onChange = (value: string) => {
     setCheckedValue(value);
@@ -62,14 +67,6 @@ export const Radio = implementRuntimeComponent(options)(props => {
     callbackMap?.onChange?.();
   };
 
-  useEffect(() => {
-    if (!isInit && defaultCheckedValue) {
-      setCheckedValue(defaultCheckedValue);
-      mergeState({ checkedValue: defaultCheckedValue });
-    }
-
-    setIsInit(true);
-  }, [defaultCheckedValue, isInit, mergeState]);
   useEffect(() => {
     subscribeMethods({
       setCheckedValue: ({ value: newCheckedValue }) => {

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

@@ -4,8 +4,9 @@ import { css } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { SelectPropsSpec as BaseSelectPropsSpec } from '../generated/types/Select';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { SelectHandle } from '@arco-design/web-react/es/Select/interface';
+import { useStateValue } from 'src/hooks/useStateValue';
 
 const SelectPropsSpec = Type.Object({
   ...BaseSelectPropsSpec,
@@ -19,20 +20,21 @@ const exampleProperties: Static<typeof SelectPropsSpec> = {
   multiple: false,
   allowCreate: false,
   bordered: true,
-  defaultValue: 'alibaba',
+  defaultValue: 'Beijing',
   disabled: false,
   labelInValue: false,
   loading: false,
   showSearch: false,
   unmountOnExit: false,
   options: [
-    { value: 'alibaba', text: 'alibaba' },
-    { value: 'baidu', text: 'baidu' },
-    { value: 'tencent', text: 'tencent' },
+    { value: 'Beijing', text: 'Beijing' },
+    { value: 'London', text: 'London' },
+    { value: 'NewYork', text: 'NewYork' },
   ],
-  placeholder: 'Please select',
+  placeholder: 'Select city',
   size: 'default',
   error: false,
+  updateWhenDefaultValueChanges: false,
 };
 
 export const Select = implementRuntimeComponent({
@@ -63,8 +65,17 @@ export const Select = implementRuntimeComponent({
     mergeState,
     defaultValue = '',
   } = props;
-  const { options = [], retainInputValue, ...cProps } = getComponentProps(props);
-  const [value, setValue] = useState<string>(defaultValue);
+  const {
+    options = [],
+    retainInputValue,
+    updateWhenDefaultValueChanges,
+    ...cProps
+  } = getComponentProps(props);
+  const [value, setValue] = useStateValue(
+    defaultValue,
+    mergeState,
+    updateWhenDefaultValueChanges
+  );
   const ref = useRef<SelectHandle | null>(null);
 
   useEffect(() => {
@@ -86,7 +97,7 @@ export const Select = implementRuntimeComponent({
       onChange={v => {
         setValue(v);
         mergeState({
-          value:v,
+          value: v,
         });
         callbackMap?.onChange?.();
       }}

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

@@ -15,7 +15,7 @@ const exampleProperties: Static<typeof SkeletonPropsSpec> = {
   text: { rows: 3, width: ['100%', 600, 400] },
 };
 
-const options = {
+export const Skeleton = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -34,9 +34,7 @@ const options = {
     styleSlots: ['content'],
     events: [],
   },
-};
-
-export const Skeleton = implementRuntimeComponent(options)(props => {
+})(props => {
   const { ...cProps } = getComponentProps(props);
   const { elementRef, customStyle, slotsElements } = props;
 

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

@@ -27,7 +27,7 @@ const exampleProperties: Static<typeof StepsPropsSpec> = {
   ],
 };
 
-const options = {
+export const Steps = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -46,9 +46,7 @@ const options = {
     styleSlots: ['content'],
     events: [],
   },
-};
-
-export const Steps = implementRuntimeComponent(options)(props => {
+})(props => {
   const { items, ...cProps } = getComponentProps(props);
   const { elementRef, customStyle, slotsElements } = props;
 

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

@@ -4,7 +4,7 @@ import { css } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { SwitchPropsSpec as BaseSwitchPropsSpec } from '../generated/types/Switch';
-import { useEffect, useState } from 'react';
+import { useStateValue } from 'src/hooks/useStateValue';
 
 const SwitchPropsSpec = Type.Object({
   ...BaseSwitchPropsSpec,
@@ -19,9 +19,10 @@ const exampleProperties: Static<typeof SwitchPropsSpec> = {
   loading: false,
   type: 'circle',
   size: 'default',
+  updateWhenDefaultValueChanges: false,
 };
 
-const options = {
+export const Switch = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -40,16 +41,15 @@ const options = {
     styleSlots: ['content'],
     events: ['onChange'],
   },
-};
-
-export const Switch = implementRuntimeComponent(options)(props => {
+})(props => {
   const { elementRef, customStyle, mergeState, callbackMap } = props;
-  const { defaultChecked, ...cProps } = getComponentProps(props);
-  const [value, setValue] = useState<boolean>(defaultChecked);
-
-  useEffect(() => {
-    setValue(defaultChecked);
-  }, [defaultChecked]);
+  const { defaultChecked, updateWhenDefaultValueChanges, ...cProps } =
+    getComponentProps(props);
+  const [value, setValue] = useStateValue<boolean>(
+    defaultChecked,
+    mergeState,
+    updateWhenDefaultValueChanges,
+  );
 
   return (
     <BaseSwitch

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

@@ -4,7 +4,8 @@ import { css } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { TabsPropsSpec as BaseTabsPropsSpec } from '../generated/types/Tabs';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
+import { useStateValue } from 'src/hooks/useStateValue';
 
 const TabsPropsSpec = Type.Object(BaseTabsPropsSpec);
 const TabsStateSpec = Type.Object({
@@ -17,6 +18,7 @@ const exampleProperties: Static<typeof TabsPropsSpec> = {
   defaultActiveTab: 0,
   tabPosition: 'top',
   size: 'default',
+  updateWhenDefaultValueChanges: false,
   tabs: [
     {
       title: 'Tab 1',
@@ -60,7 +62,8 @@ export const Tabs = implementRuntimeComponent({
     events: ['onChange', 'onClickTab'],
   },
 })(props => {
-  const { defaultActiveTab, tabs, ...cProps } = getComponentProps(props);
+  const { defaultActiveTab, updateWhenDefaultValueChanges, tabs, ...cProps } =
+    getComponentProps(props);
   const {
     getElement,
     callbackMap,
@@ -70,11 +73,12 @@ export const Tabs = implementRuntimeComponent({
     slotsElements,
   } = props;
   const ref = useRef<{ current: HTMLDivElement }>(null);
-  const [activeTab, setActiveTab] = useState<number>(defaultActiveTab ?? 0);
-
-  useEffect(() => {
-    mergeState({ activeTab: defaultActiveTab });
-  }, []);
+  const [activeTab, setActiveTab] = useStateValue<number>(
+    defaultActiveTab ?? 0,
+    mergeState,
+    updateWhenDefaultValueChanges,
+    'activeTab'
+  );
 
   useEffect(() => {
     const ele = ref.current?.current;

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

@@ -4,8 +4,9 @@ import { css } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { TextAreaPropsSpec as BaseTextAreaPropsSpec } from '../generated/types/TextArea';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { RefInputType } from '@arco-design/web-react/es/Input/interface';
+import { useStateValue } from 'src/hooks/useStateValue';
 
 const TextAreaPropsSpec = Type.Object({
   ...BaseTextAreaPropsSpec,
@@ -24,10 +25,10 @@ const exampleProperties: Static<typeof TextAreaPropsSpec> = {
   error: false,
   size: 'default',
   autoSize: true,
-  updateWhenDefaultValueChanges:false
+  updateWhenDefaultValueChanges: false,
 };
 
-const options = {
+export const TextArea = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -46,9 +47,7 @@ const options = {
     styleSlots: ['TextArea'],
     events: ['onChange', 'onBlur', 'onFocus', 'onClear', 'onPressEnter'],
   },
-};
-
-export const TextArea = implementRuntimeComponent(options)(props => {
+})(props => {
   const {
     getElement,
     updateWhenDefaultValueChanges,
@@ -57,7 +56,11 @@ export const TextArea = implementRuntimeComponent(options)(props => {
     mergeState,
   } = props;
   const { defaultValue, ...cProps } = getComponentProps(props);
-  const [value, setValue] = useState(defaultValue);
+  const [value, setValue] = useStateValue(
+    defaultValue,
+    mergeState,
+    updateWhenDefaultValueChanges
+  );
   const ref = useRef<RefInputType | null>(null);
 
   useEffect(() => {
@@ -67,13 +70,6 @@ export const TextArea = implementRuntimeComponent(options)(props => {
     }
   }, [getElement, ref]);
 
-  useEffect(() => {
-    if (updateWhenDefaultValueChanges) {
-      setValue(defaultValue);
-      mergeState({ value: defaultValue });
-    }
-  }, [defaultValue, updateWhenDefaultValueChanges]);
-
   return (
     <BaseTextArea
       ref={ref}

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

@@ -49,7 +49,7 @@ const exampleProperties: Static<typeof TimelinePropsSpec> = {
   ],
 };
 
-const options = {
+export const Timeline = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -65,9 +65,7 @@ const options = {
     styleSlots: ['content'],
     events: [],
   },
-};
-
-export const Timeline = implementRuntimeComponent(options)(props => {
+})(props => {
   const { items, ...cProps } = getComponentProps(props);
   const { elementRef, customStyle } = props;
 

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

@@ -20,7 +20,7 @@ const exampleProperties: Static<typeof TooltipPropsSpec> = {
   unmountOnExit: true,
 };
 
-const options = {
+export const Tooltip = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -39,9 +39,7 @@ const options = {
     styleSlots: ['content'],
     events: [],
   },
-};
-
-export const Tooltip = implementRuntimeComponent(options)(props => {
+})(props => {
   const { controlled, ...cProps } = getComponentProps(props);
   const { elementRef, subscribeMethods, slotsElements, customStyle } = props;
 

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

@@ -4,8 +4,9 @@ import { css } from '@emotion/css';
 import { Type, Static } from '@sinclair/typebox';
 import { FALLBACK_METADATA, getComponentProps } from '../sunmao-helper';
 import { TreeSelectPropsSpec as BaseTreeSelectPropsSpec } from '../generated/types/TreeSelect';
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { RefTreeSelectType } from '@arco-design/web-react/es/TreeSelect';
+import { useStateValue } from 'src/hooks/useStateValue';
 
 const TreeSelectPropsSpec = Type.Object(BaseTreeSelectPropsSpec);
 const TreeSelectStateSpec = Type.Object({
@@ -52,9 +53,10 @@ const exampleProperties: Static<typeof TreeSelectPropsSpec> = {
   showSearch: true,
   loading: false,
   allowClear: true,
+  updateWhenDefaultValueChanges: false,
 };
 
-const options = {
+export const TreeSelect = implementRuntimeComponent({
   version: 'arco/v1',
   metadata: {
     ...FALLBACK_METADATA,
@@ -73,14 +75,18 @@ const options = {
     styleSlots: ['content'],
     events: ['onChange'],
   },
-};
-
-export const TreeSelect = implementRuntimeComponent(options)(props => {
-  const { defaultValue, ...cProps } = getComponentProps(props);
+})(props => {
+  const { defaultValue, updateWhenDefaultValueChanges, ...cProps } =
+    getComponentProps(props);
   const { getElement, customStyle, mergeState, callbackMap } = props;
   const ref = useRef<RefTreeSelectType | null>(null);
 
-  const [selectedOptions, setSelectedOptions] = useState<string[]>(defaultValue!);
+  const [selectedOptions, setSelectedOptions] = useStateValue<string[]>(
+    defaultValue!,
+    mergeState,
+    updateWhenDefaultValueChanges,
+    'selectedOptions'
+  );
 
   useEffect(() => {
     // arco definition doesn't declare dom, but it actually has.

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

@@ -38,4 +38,8 @@ export const CheckboxPropsSpec = {
     title: 'Check All Text',
     category: Category.Basic,
   }),
+  updateWhenDefaultValueChanges: Type.Boolean({
+    title: 'Update When Default Value Changes',
+    category: Category.Basic,
+  }),
 };

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

@@ -51,6 +51,10 @@ export const CollapsePropsSpec = {
       displayedKeys: ['header'],
     }
   }),
+  updateWhenDefaultValueChanges: Type.Boolean({
+    title: 'Update When Default Value Changes',
+    category: Category.Basic,
+  }),
   lazyLoad:Type.Boolean({
     title:'Lazy Load',
     description:'If true, invisible panels will not be rendered on mount'

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

@@ -17,6 +17,10 @@ export const MentionsPropsSpec = {
     weight: 2,
     category: Category.Data,
   }),
+  updateWhenDefaultValueChanges: Type.Boolean({
+    title: 'Update When Default Value Changes',
+    category: Category.Basic,
+  }),
   prefix: Type.String({
     title: 'Prefix',
     category: Category.Basic,

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

@@ -14,19 +14,32 @@ export const MenuPropsSpec = {
   }),
   items: Type.Array(
     Type.Object({
-      key: Type.String(),
-      text: Type.String(),
-      disabled: Type.Optional(Type.Boolean()),
+      key: Type.String({
+        title:'Key'
+      }),
+      text: Type.String({
+        title:'Text'
+      }),
+      disabled: Type.Optional(Type.Boolean({
+        title:'Disabled'
+      })),
     }),
     {
       title:'Items',
       category: Category.Basic,
+      widgetOptions:{
+        displayedKeys:['text']
+      }
     }
   ),
   defaultActiveKey: Type.String({
     title: 'Default Active Key',
     category: Category.Basic,
   }),
+  updateWhenDefaultValueChanges: Type.Boolean({
+    title: 'Update When Default Value Changes',
+    category: Category.Basic,
+  }),
   autoOpen: Type.Boolean({
     title: 'Auto Open',
     description: 'Whether to expand all multi-level menus by default',

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

@@ -15,6 +15,10 @@ export const PaginationPropsSpec = {
     title: 'Current Page',
     category: Category.Basic,
   }),
+  updateWhenDefaultValueChanges: Type.Boolean({
+    title: 'Update When Default Value Changes',
+    category: Category.Basic,
+  }),
   disabled: Type.Boolean({
     title: 'Disabled',
     category: Category.Basic,

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

@@ -18,6 +18,10 @@ export const RadioPropsSpec = {
       displayedKeys: ['label'],
     }
   }),
+  updateWhenDefaultValueChanges: Type.Boolean({
+    title: 'Update When Default Value Changes',
+    category: Category.Basic,
+  }),
   type: StringUnion(['radio', 'button'], {
     category: Category.Style,
   }),

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

@@ -23,9 +23,17 @@ export const SelectPropsSpec = {
     }),
     {
       title: 'Options',
-      category: Category.Data
+      category: Category.Data,
+      widgetOptions:{
+        displayedKeys:['value']
+      }
     }
   ),
+  updateWhenDefaultValueChanges: Type.Boolean({
+    title: 'Update When Default Value Changes',
+    category: Category.Basic,
+    weight:6
+  }),
   multiple: Type.Boolean({
     title: 'Multiple',
     category: Category.Basic,

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

@@ -7,6 +7,10 @@ export const SwitchPropsSpec = {
     title: 'Default Checked',
     category: Category.Basic,
   }),
+  updateWhenDefaultValueChanges: Type.Boolean({
+    title: 'Update When Default Value Changes',
+    category: Category.Basic,
+  }),
   disabled: Type.Boolean({
     title: 'Disabled',
     category: Category.Basic,

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

@@ -9,18 +9,25 @@ export const TabsPropsSpec = {
     description: 'The index of default active Tab. Start with 0.',
   }),
   tabs: Type.Array(Type.Object({
-    title:Type.String({
-      title:'Title'
+    title: Type.String({
+      title: 'Title'
     }),
     hidden: Type.Boolean({
       title: 'Hidden',
     }),
-    destroyOnHide:Type.Boolean({
+    destroyOnHide: Type.Boolean({
       title: 'Destroy On Hide',
     }),
   }), {
     title: 'Tabs',
     category: Category.Basic,
+    widgetOptions: {
+      displayedKeys: ['title']
+    }
+  }),
+  updateWhenDefaultValueChanges: Type.Boolean({
+    title: 'Update When Default Value Changes',
+    category: Category.Basic,
   }),
   type: StringUnion(['line', 'card', 'card-gutter', 'text', 'rounded', 'capsule'], {
     title: 'Style Type',

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

@@ -7,6 +7,10 @@ export const TextAreaPropsSpec = {
     title: 'Default Value',
     category: Category.Basic,
   }),
+  updateWhenDefaultValueChanges: Type.Boolean({
+    title: 'Update When Default Value Changes',
+    category: Category.Basic,
+  }),
   placeholder: Type.String({
     title: 'Placeholder',
     category: Category.Basic,
@@ -19,10 +23,6 @@ export const TextAreaPropsSpec = {
     title: 'Disabled',
     category: Category.Basic,
   }),
-  updateWhenDefaultValueChanges: Type.Boolean({
-    title: 'Update When Default Value Changes',
-    category: Category.Basic,
-  }),
   size: StringUnion(['default', 'mini', 'small', 'large'], {
     title: 'Size',
     category: Category.Style,

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

@@ -24,6 +24,10 @@ export const TreeSelectPropsSpec = {
     category: Category.Data,
     widget: EXPRESSION_WIDGET_TYPE,
   }),
+  updateWhenDefaultValueChanges: Type.Boolean({
+    title: 'Update When Default Value Changes',
+    category: Category.Basic,
+  }),
   multiple: Type.Boolean({
     title: 'Multiple',
     category: Category.Basic,

packages/arco-lib/src/hooks/useStateValue.ts

@@ -0,0 +1,27 @@
+import { RuntimeFunctions } from '@sunmao-ui/runtime';
+import { useState, useEffect } from 'react';
+
+export const useStateValue = <T>(
+    defaultValue: T,
+    mergeState?: RuntimeFunctions<Record<string, T>, any>['mergeState'],
+    updateWhenDefaultValueChanges?: boolean,
+    key = 'value',
+): [T, React.Dispatch<React.SetStateAction<T>>] => {
+
+    const [value, setValue] = useState<T>(defaultValue);
+
+    useEffect(() => {
+        if (mergeState) {
+            mergeState({ [key]: defaultValue });
+        }
+    }, [])
+
+    useEffect(() => {
+        if (updateWhenDefaultValueChanges && mergeState) {
+            setValue(defaultValue);
+            mergeState({ [key]: defaultValue });
+        }
+    }, [defaultValue, updateWhenDefaultValueChanges, mergeState]);
+
+    return [value, setValue];
+};