feat: 升级依赖

package.json

@@ -29,8 +29,8 @@
     "postversion": "git push --follow-tags"
   },
   "peerDependencies": {
-    "@asany/icons": ">=0.2.2",
-    "react": ">=17.0.2"
+    "@asany/icons": ">=0.2.12",
+    "react": ">=18.2.0"
   },
   "prettier": {
     "printWidth": 120,
@@ -59,22 +59,22 @@
   ],
   "dependencies": {
     "@asany/sortable": "^0.1.30",
-    "@asany/tree": "^0.1.14",
+    "@asany/tree": "^0.1.21",
     "@daybrush/drag": "^0.19.3",
     "@scena/react-guides": "^0.16.0",
     "moveable-helper": "^0.4.0",
     "overlayscrollbars": "^1.13.1",
-    "overlayscrollbars-react": "^0.2.3",
+    "overlayscrollbars-react": "^0.3.0",
     "react-moveable": "^0.30.3",
     "react-selecto": "^1.13.0",
     "react-transition-group": "^4.4.2",
-    "react-use": "^17.3.1",
+    "react-use": "^17.4.0",
     "scenejs": "^1.5.0",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
-    "@asany/icons": "^0.2.2",
     "@apollo/client": "^3.4.17",
+    "@asany/icons": "^0.2.2",
     "@babel/core": "^7.16.0",
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
@@ -84,9 +84,9 @@
     "@storybook/addon-links": "^6.3.12",
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addons": "^6.3.12",
-    "@storybook/react": "^6.3.12",
+    "@storybook/react": "^6.5.9",
     "@types/lodash-es": "^4.17.5",
-    "@types/react": "^17.0.36",
+    "@types/react": "^18.0.14",
     "@types/react-dom": "^17.0.11",
     "@types/react-is": "^17.0.3",
     "@types/react-router-dom": "^5.3.2",
@@ -107,12 +107,12 @@
     "lodash-es": "^4.17.21",
     "pinst": "^2.1.6",
     "postcss": "^8.3.11",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-dnd": "^14.0.4",
     "react-dnd-html5-backend": "^14.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "react-router-dom": "^6.0.2",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "react-router-dom": "^6.3.0",
     "rollup-plugin-postcss": "^4.0.1",
     "size-limit": "^7.0.3",
     "sunmao": "^0.2.27",

src/AsanyEditor.tsx

@@ -45,11 +45,11 @@ function Editor({
   const WorkComponent = useCallback(
     (props: WorkspaceProps) => {
       if (isElement(workspace)) {
-        return React.cloneElement(workspace, props);
+        return React.cloneElement(workspace as any, props);
       }
       if (isValidElementType(workspace)) {
         const { children, ...otherProps } = props;
-        return React.createElement(workspace, otherProps, children);
+        return React.createElement(workspace as any, otherProps, children);
       }
       return <div>插件未配置 Workspace 组件</div>;
     },
@@ -69,7 +69,7 @@ function Editor({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onSave]);
 
-  const handleResize = useCallback((x) => {
+  const handleResize = useCallback((x: React.SetStateAction<number>) => {
     setOffsetLeft(x);
   }, []);
 

src/components/scena/index.tsx

@@ -86,7 +86,7 @@ function Scena(props: ScenaProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const handleClick = useCallback(
-    (e) => {
+    (e: any) => {
       if (e.target.classList.contains('moveable-control')) {
         return e.stopPropagation();
       }

src/components/sidebar/Toolboard.tsx

@@ -194,7 +194,7 @@ function Toolboard(props: ToolboardProps, ref: React.ForwardedRef<IToolboard>) {
   state.current.width = width;
   state.current.minimizable = minimizable;
 
-  const handleResize = useCallback((x) => {
+  const handleResize = useCallback((x: number) => {
     state.current.offset += x;
     forceRender();
     onResize(calculateOffsetLeft(state.current.offset));
@@ -213,7 +213,7 @@ function Toolboard(props: ToolboardProps, ref: React.ForwardedRef<IToolboard>) {
   }, []);
 
   const calculateOffsetLeft = useCallback(
-    (offsetLeft) => {
+    (offsetLeft: number) => {
       const width = state.current.width;
       if (width + offsetLeft < minWidth) {
         return minWidth - width;
@@ -224,7 +224,7 @@ function Toolboard(props: ToolboardProps, ref: React.ForwardedRef<IToolboard>) {
   );
 
   const calculateWidth = useCallback(
-    (width, offsetLeft) => {
+    (width: number, offsetLeft: number) => {
       return Math.max(minWidth, width + offsetLeft);
     },
     [minWidth, minimizable]

src/properties/FormStateContext.tsx

@@ -46,7 +46,7 @@ function FormProvider(props: FormProviderProps) {
   const manager = useRef(new FormEventManager(form));
 
   const handleValuesChange = useCallback(
-    (changedValues, allValues) => {
+    (changedValues: any, allValues: any) => {
       manager.current.dispatch(changedValues);
       onValuesChange && onValuesChange(changedValues, allValues);
     },
@@ -65,7 +65,7 @@ function FormProvider(props: FormProviderProps) {
 
   return (
     <FormStateContext.Provider value={manager.current}>
-      <Form {...props} onValuesChange={handleValuesChange} />
+      <Form {...(props as any)} onValuesChange={handleValuesChange} />
     </FormStateContext.Provider>
   );
 }
@@ -83,7 +83,7 @@ export function useFormSelector<Selected>(
 ) {
   const context = useContext(FormStateContext);
   const state = context.getState();
-  const [, forceRender] = useReducer((s) => s + 1, 0);
+  const [, forceRender] = useReducer((s: number) => s + 1, 0);
   const latestSelectedState = useRef<Selected>();
   const selectedState = selector(state);
   const checkForUpdates = useCallback(function checkForUpdates() {

src/properties/data-entry/ScrubbableControl.tsx

@@ -47,7 +47,7 @@ const ScrubbableControl = (props: ScrubbableControlProps) => {
     style = {},
   } = props;
 
-  const input = useRef<Input>(null);
+  const input = useRef<any>(null);
   const [internalValue, setInternalValue] = useState<string>('');
 
   const handleInputFormat = useCallback((value: InputText) => {

src/properties/data-entry/Select.tsx

@@ -53,30 +53,29 @@ export interface SelectPopoverProps {
   compare: OptionCompare;
 }
 
-const renderSelectOption = (compare: OptionCompare, onChange: (option: SelectOption) => void) => (
-  option: SelectOption | SelectOptionGroup
-) => {
-  const { label } = option;
-  if (option.hasOwnProperty('value')) {
-    const item = option as SelectOption;
-    const handleClick = () => {
-      onChange(item.value as any);
-    };
-    return (
-      <li className="asayneditor-select-option" key={item.value} onClick={handleClick}>
-        <span className="left-icon">{compare(item) && <Icon name="VectorCorrect" />}</span>
-        <span className="center-text">{item.label}</span>
-      </li>
-    );
-  } else {
-    const { options } = option as SelectOptionGroup;
-    return (
-      <li className="asayneditor-select-option-group" key={label.toString()}>
-        <ul>{(options || []).map(renderSelectOption(compare, onChange))}</ul>
-      </li>
-    );
-  }
-};
+const renderSelectOption =
+  (compare: OptionCompare, onChange: (option: SelectOption) => void) => (option: SelectOption | SelectOptionGroup) => {
+    const { label } = option;
+    if (option.hasOwnProperty('value')) {
+      const item = option as SelectOption;
+      const handleClick = () => {
+        onChange(item.value as any);
+      };
+      return (
+        <li className="asayneditor-select-option" key={item.value} onClick={handleClick}>
+          <span className="left-icon">{compare(item) && <Icon name="VectorCorrect" />}</span>
+          <span className="center-text">{item.label}</span>
+        </li>
+      );
+    } else {
+      const { options } = option as SelectOptionGroup;
+      return (
+        <li className="asayneditor-select-option-group" key={label.toString()}>
+          <ul>{(options || []).map(renderSelectOption(compare, onChange))}</ul>
+        </li>
+      );
+    }
+  };
 
 // 列表组件
 const SelectModal = React.memo((props: SelectPopoverProps) => {