feat: 导出 Toolbar 中的 render 方法

limaofeng · Nov 23, 2021 · 176a763 · 176a763
1 parent 98f6690
commit 176a763
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -115,7 +115,7 @@
     "react-router-dom": "^6.0.2",
     "rollup-plugin-postcss": "^4.0.1",
     "size-limit": "^7.0.3",
-    "sunmao": "^0.2.25",
+    "sunmao": "^0.2.26",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",

diff --git a/src/components/scena/index.tsx b/src/components/scena/index.tsx
@@ -79,9 +79,11 @@ function Scena(props: ScenaProps) {
 
   const changeHandToGrab = useCallback(() => {
     setCursorStyle('grab');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const changeHandToGrabbing = useCallback(() => {
     setCursorStyle('grabbing');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const handleClick = useCallback(
     (e) => {
@@ -95,6 +97,7 @@ function Scena(props: ScenaProps) {
       // TODO: 取消 Block 的选中效果
       console.warn('取消 Block 的选中效果');
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [disabled, onClick]
   );
   const handleScroll = (x: number, y: number) => {
@@ -108,6 +111,7 @@ function Scena(props: ScenaProps) {
       type: UIActionType.CanvasZoom,
       payload: zoom,
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleGuides = useCallback((data: RulerGuides) => {
@@ -119,6 +123,7 @@ function Scena(props: ScenaProps) {
         vertical: [0, width, width / 2, ...data.vertical],
       },
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleResetScroll = useCallback(() => {
@@ -131,14 +136,17 @@ function Scena(props: ScenaProps) {
       Math.max((viewportWidth - width - 30) / 2 + lsw, 0),
       Math.max((clientHeight - height - 30) / 2, -(height * (1 - zoom)) / 2)
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [keepOpen, leftSiderbarWidth, minimizable, options?.width]);
 
   useEffect(() => {
     dispatch({ type: ActionType.ScenaReset, payload: handleResetScroll });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [handleResetScroll]);
 
   useEffect(() => {
     isZoom && setTimeout(handleResetScroll, 100);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isZoom]);
 
   const { cursorStyle: cursorstyle, scrollX, scrollY } = state.current;

diff --git a/src/components/toolbar/Toolbar.tsx b/src/components/toolbar/Toolbar.tsx
@@ -22,11 +22,12 @@ function iconRender(icon: any) {
   return React.createElement(icon);
 }
 
-function render(item: AsanyTool, focus: any) {
+export function render(item: AsanyTool, focus: any) {
   const disabled = item.isDisabled!(focus[item.id]);
   return item.render ? (
     <item.render key={item.id} {...(item as any)} disabled={disabled} />
   ) : (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
     <a
       key={item.id}
       className={classnames('toolbar-icon', item.className, { disabled })}
@@ -56,12 +57,12 @@ function Header(props: HeaderProps) {
     isEqual
   );
 
-  const handClickBack = useCallback(() => onBack && onBack(), []);
+  const handClickBack = useCallback(() => onBack && onBack(), [onBack]);
 
   return (
     <div className="sketch-toolbar">
       {content ? (
-        React.createElement(content)
+        React.createElement(content, { onBack })
       ) : (
         <>
           <div className="toolbar-left" onClick={handClickBack}>

diff --git a/src/style/sketch.less b/src/style/sketch.less
@@ -184,11 +184,10 @@
     .toolbar-center {
       display: flex;
       flex: 1 1 0%;
-      justify-content: space-between;
       height: 100%;
       padding: 0 27px;
-      & > div {
-        display: flex;
+      & > .toolbar-icon {
+        margin-right: 8px;
       }
     }
 

diff --git a/src/typings.ts b/src/typings.ts
@@ -199,7 +199,7 @@ export interface ISidebar {
 }
 
 export interface IToolbar {
-  content?: ComponentType;
+  content?: ComponentType<any>;
   tools?: AsanyTool[];
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -14466,10 +14466,10 @@ stylis@^4.0.6:
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
   integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
 
-sunmao@^0.2.25:
-  version "0.2.25"
-  resolved "https://registry.npmjs.org/sunmao/-/sunmao-0.2.25.tgz#81245d1f81283f675741fbac583ee49af54f87c9"
-  integrity sha512-bfkW4f7gWEd8oOPQdN3nJGuqs5WtR1dNK4JOWFa+hkvlSbpisZMrq352NGvM0Qua5p6fSnwY+E2cDum3l0Miyw==
+sunmao@^0.2.26:
+  version "0.2.26"
+  resolved "https://registry.npmjs.org/sunmao/-/sunmao-0.2.26.tgz#92db73ba5cd2fd98b77a48a4b77488b7029482f1"
+  integrity sha512-bBXkJu32/VSF9BpDQZngJY0VrKQXaAKKoLU0mgua8Vb/6NmAWd50qkk+boBlsMEc/s0R3Jvy42+AYCOyHmIQ/A==
   dependencies:
     classnames "^2.3.1"
     lodash-es "^4.17.21"