sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pass named function to react.memo so in dev tools it doesn't show as anonymous (#2216)

Browse Source 
This makes debugging easier as well
This commit is contained in:
Aakansha Doshi 2020-10-08 03:07:19 +05:30 committed by GitHub
parent 215128ffdf
commit 3835fa60e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/excalidraw-embed/index.tsx
View File

@ -9,63 +9,62 @@ import "../css/styles.scss";
import { ExcalidrawProps } from "../types"; import { ExcalidrawProps } from "../types";
import { IsMobileProvider } from "../is-mobile"; import { IsMobileProvider } from "../is-mobile";
const Excalidraw = React.memo( const Excalidraw = (props: ExcalidrawProps) => {
(props: ExcalidrawProps) => { const {
const { width,
width, height,
height, onChange,
onChange, initialData,
initialData, user,
user, onUsernameChange,
onUsernameChange, } = props;
} = props;
useEffect(() => { useEffect(() => {
// Block pinch-zooming on iOS outside of the content area // Block pinch-zooming on iOS outside of the content area
const handleTouchMove = (event: TouchEvent) => { const handleTouchMove = (event: TouchEvent) => {
// @ts-ignore // @ts-ignore
if (typeof event.scale === "number" && event.scale !== 1) { if (typeof event.scale === "number" && event.scale !== 1) {
event.preventDefault(); event.preventDefault();
} }
}; };
document.addEventListener("touchmove", handleTouchMove, { document.addEventListener("touchmove", handleTouchMove, {
passive: false, passive: false,
}); });
return () => { return () => {
document.removeEventListener("touchmove", handleTouchMove); document.removeEventListener("touchmove", handleTouchMove);
}; };
}, []); }, []);
return ( return (
<InitializeApp> <InitializeApp>
<IsMobileProvider> <IsMobileProvider>
<App <App
width={width} width={width}
height={height} height={height}
onChange={onChange} onChange={onChange}
initialData={initialData} initialData={initialData}
user={user} user={user}
onUsernameChange={onUsernameChange} onUsernameChange={onUsernameChange}
/> />
</IsMobileProvider> </IsMobileProvider>
</InitializeApp> </InitializeApp>
); );
}, };
(prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => {
const { initialData: prevInitialData, user: prevUser, ...prev } = prevProps;
const { initialData: nextInitialData, user: nextUser, ...next } = nextProps;
const prevKeys = Object.keys(prevProps) as (keyof typeof prev)[]; const areEqual = (prevProps: ExcalidrawProps, nextProps: ExcalidrawProps) => {
const nextKeys = Object.keys(nextProps) as (keyof typeof next)[]; const { initialData: prevInitialData, user: prevUser, ...prev } = prevProps;
const { initialData: nextInitialData, user: nextUser, ...next } = nextProps;
return ( const prevKeys = Object.keys(prevProps) as (keyof typeof prev)[];
prevUser?.name === nextUser?.name && const nextKeys = Object.keys(nextProps) as (keyof typeof next)[];
prevKeys.length === nextKeys.length &&
prevKeys.every((key) => prev[key] === next[key])
);
},
);
export default Excalidraw; return (
prevUser?.name === nextUser?.name &&
prevKeys.length === nextKeys.length &&
prevKeys.every((key) => prev[key] === next[key])
);
};
export default React.memo(Excalidraw, areEqual);