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