pref: use re-resizable instead of react-resizable

packages/editor/package.json

@@ -41,7 +41,6 @@
     "@sunmao-ui/core": "^0.5.4",
     "@sunmao-ui/editor-sdk": "^0.1.8",
     "@sunmao-ui/runtime": "^0.5.6",
-    "@types/react-resizable": "^1.7.4",
     "acorn": "^8.7.0",
     "acorn-loose": "^8.3.0",
     "acorn-walk": "^8.2.0",
@@ -53,10 +52,10 @@
     "lodash-es": "^4.17.21",
     "mobx": "^6.3.8",
     "mobx-react-lite": "^3.2.2",
+    "re-resizable": "^6.9.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-json-tree": "^0.16.1",
-    "react-resizable": "^3.0.4",
     "tern": "^0.24.3"
   },
   "devDependencies": {

packages/editor/src/components/ComponentsList/ComponentList.tsx

@@ -15,6 +15,7 @@ import { groupBy, sortBy } from 'lodash-es';
 import { EditorServices } from '../../types';
 import { ExplorerMenuTabs } from '../../constants/enum';
 import { RuntimeComponent } from '@sunmao-ui/core';
+import { css } from '@emotion/css';
 
 type Props = {
   services: EditorServices;
@@ -48,6 +49,12 @@ function getTagColor(version: string): string {
   }
 }
 
+const tagStyle = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 const IGNORE_COMPONENTS = ['dummy'];
 
 export const ComponentList: React.FC<Props> = ({ services }) => {
@@ -138,7 +145,7 @@ export const ComponentList: React.FC<Props> = ({ services }) => {
                     >
                       {c.metadata.displayName}
                       <Tag colorScheme={getTagColor(c.version)} size="sm">
-                        {c.version}
+                        <div className={tagStyle}>{c.version}</div>
                       </Tag>
                     </Flex>
                   );

packages/editor/src/components/Editor.tsx

@@ -26,8 +26,7 @@ import { css } from '@emotion/css';
 import { EditorMaskWrapper } from './EditorMaskWrapper';
 import { AppModel } from '../AppModel/AppModel';
 import { LocalStorageForm } from './DataSource/LocalStorageForm';
-import { Resizable } from 'react-resizable';
-import { EXPLORE_MENU_MIN_WIDTH, TOOL_MENU_MIN_WIDTH } from '../constants/layout';
+import { Resizable } from 're-resizable';
 
 type ReturnOfInit = ReturnType<typeof initSunmaoUI>;
 
@@ -40,40 +39,6 @@ type Props = {
   libs: SunmaoLib[];
 };
 
-const getResizeBarStyle = (type: 'exploreMenu' | 'toolMenu') => {
-  return css`
-    .resize-bar {
-      position: absolute;
-      ${type === 'exploreMenu' ? 'right: 0' : 'left:0'};
-      top: 0;
-      width: 8px;
-      height: 100%;
-      ${type === 'exploreMenu'
-        ? 'transform: translateX(50%)'
-        : 'transform: translateX(-50%)'};
-      cursor: col-resize;
-      display: flex;
-      place-items: center;
-      justify-content: center;
-
-      i {
-        width: 3px;
-        height: 100%;
-        transition: transform 0.1s ease-in, opacity 0.1s ease-in;
-        background-color: #eee;
-        opacity: 0;
-        transform: scaleX(0);
-        transform-origin: center;
-      }
-
-      &:hover i {
-        transform: scaleX(1);
-        opacity: 1;
-      }
-    }
-  `;
-};
-
 const ApiFormStyle = css`
   width: 100%;
   height: 100%;
@@ -104,8 +69,6 @@ export const Editor: React.FC<Props> = observer(
     const [code, setCode] = useState('');
     const [recoverKey, setRecoverKey] = useState(0);
     const [isError, setIsError] = useState<boolean>(false);
-    const [exploreMenuWidth, setExploreMenuWidth] = useState(EXPLORE_MENU_MIN_WIDTH);
-    const [toolMenuWidth, setToolMenuWidth] = useState(TOOL_MENU_MIN_WIDTH);
 
     const onError = (err: Error | null) => {
       setIsError(err !== null);
@@ -235,27 +198,21 @@ export const Editor: React.FC<Props> = observer(
       return (
         <>
           <Resizable
-            width={exploreMenuWidth}
-            height={Infinity}
-            minConstraints={[200, Infinity]}
-            maxConstraints={[480, Infinity]}
-            axis="x"
-            onResize={(_e, data) => {
-              setExploreMenuWidth(data.size.width);
+            defaultSize={{
+              width: 280,
+              height: '100%',
             }}
-            handle={
-              <div className="resize-bar">
-                <i />
-              </div>
-            }
+            enable={{ right: true }}
+            style={{ zIndex: 2 }}
+            maxWidth={480}
+            minWidth={200}
           >
             <Box
-              width={exploreMenuWidth}
-              className={getResizeBarStyle('exploreMenu')}
               borderRightWidth="1px"
               borderColor="gray.200"
               position="relative"
               zIndex="2"
+              height="full"
             >
               <Tabs
                 height="100%"
@@ -301,28 +258,18 @@ export const Editor: React.FC<Props> = observer(
           <Flex flex={1} position="relative" overflow="hidden">
             {appBox}
             <Resizable
-              width={toolMenuWidth}
-              height={Infinity}
-              minConstraints={[200, Infinity]}
-              maxConstraints={[480, Infinity]}
-              resizeHandles={['w']}
-              axis="x"
-              onResize={(_e, data) => {
-                setToolMenuWidth(data.size.width);
+              defaultSize={{
+                width: 320,
+                height: '100%',
               }}
-              handle={
-                <div className="resize-bar">
-                  <i />
-                </div>
-              }
+              enable={{ left: true }}
+              maxWidth={480}
+              minWidth={250}
             >
               <Box
-                minWidth={toolMenuWidth}
-                width={toolMenuWidth}
-                className={getResizeBarStyle('toolMenu')}
+                height="full"
                 borderLeftWidth="1px"
                 borderColor="gray.200"
-                overflow="auto"
                 position="relative"
                 zIndex="0"
               >