language-servers/roc
1
0
Fork 0
mirror of https://github.com/roc-lang/roc.git synced 2025-09-27 13:59:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Pull out shared hook

Browse source
This commit is contained in:
Ayaz Hafiz 2023-08-02 14:44:06 -05:00
parent 43e2f2f091
commit f3c0b54fe9
No known key found for this signature in database
GPG key ID: 0E2A37416A25EF58
4 changed files with 53 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

36
crates/compiler/checkmate/www/src/components/EventList.tsx
View file

@ -1,8 +1,9 @@
import clsx from "clsx";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import React, { useCallback, useMemo, useState } from "react";
import { TypedEmitter } from "tiny-typed-emitter";
import { EventEpoch } from "../engine/engine";
import { lastSubEvent } from "../engine/event_util";
import { useFocusOutlineEvent } from "../hooks/useFocusOutlineEvent";
import { UnificationMode, Event } from "../schema";
import { EventListMessage, GraphMessage } from "../utils/events";
import { Refine } from "../utils/refine";
@ -110,7 +111,8 @@ function Unification(props: UnificationProps): JSX.Element {
const [isOpen, setIsOpen] = useState(false);
const isOutlined = useFocusOutlineEvent({
ee: eventListEe,
epoch: currentEpoch,
value: currentEpoch,
event: "focusEpoch",
});
const modeIcon = useMemo(() => <UnificationModeIcon mode={mode} />, [mode]);
@ -336,33 +338,3 @@ function EventListEpochCell({
</span>
);
}
function useFocusOutlineEvent({
epoch,
ee,
}: {
epoch: EventEpoch;
ee: TypedEmitter<EventListMessage>;
}) {
const [isOutlined, setIsOutlined] = useState(false);
useEffect(() => {
ee.on("focusEpoch", (focusEpoch: EventEpoch) => {
if (focusEpoch !== epoch) return;
setIsOutlined(true);
});
}, [ee, epoch]);
useEffect(() => {
if (!isOutlined) return;
const timer = setTimeout(() => {
setIsOutlined(false);
}, 500);
return () => {
clearTimeout(timer);
};
}, [isOutlined]);
return isOutlined;
}

39
crates/compiler/checkmate/www/src/components/Graph/VariableNode.tsx
View file

@ -5,10 +5,10 @@ import { assertExhaustive } from "../../utils/exhaustive";
import { contentStyles, LinkStyles } from "../Content";
import { VariableElPretty } from "../Common/Variable";
import { SubsSnapshot, TypeDescriptor } from "../../engine/subs";
import { useEffect, useState } from "react";
import { TypedEmitter } from "tiny-typed-emitter";
import { VariableLink } from "../Common/VariableLink";
import { VariableMessage } from "../../utils/events";
import { useFocusOutlineEvent } from "../../hooks/useFocusOutlineEvent";
type AddSubVariableLink = ({
from,
@ -45,8 +45,9 @@ export default function VariableNode({
const isOutlined = useFocusOutlineEvent({
ee: eeProp,
isOutlinedProp,
variable: rawVariable,
value: rawVariable,
event: "focus",
defaultIsOutlined: isOutlinedProp,
});
const varType = subs.get(rawVariable);
@ -146,38 +147,6 @@ export default function VariableNode({
);
}
function useFocusOutlineEvent({
variable,
isOutlinedProp,
ee,
}: {
variable: Variable;
isOutlinedProp: boolean;
ee: TypedEmitter<VariableMessage>;
}) {
const [isOutlined, setIsOutlined] = useState(isOutlinedProp);
useEffect(() => {
ee.on("focus", (focusVar: Variable) => {
if (focusVar !== variable) return;
setIsOutlined(true);
});
}, [ee, variable]);
useEffect(() => {
if (!isOutlined) return;
const timer = setTimeout(() => {
setIsOutlined(false);
}, 500);
return () => {
clearTimeout(timer);
};
}, [isOutlined]);
return isOutlined;
}
function VariableNodeContent(
variable: Variable,
desc: TypeDescriptor | undefined,

35
crates/compiler/checkmate/www/src/components/Graph/VariablesGraph.tsx
View file

@ -31,12 +31,12 @@ import { SubsSnapshot } from "../../engine/subs";
import { TypedEmitter } from "tiny-typed-emitter";
import EpochCell from "../Common/EpochCell";
import { HashLink } from "react-router-hash-link";
import { EventEpoch } from "../../engine/engine";
import {
EventListMessage,
GraphMessage,
VariableMessage,
} from "../../utils/events";
import { useFocusOutlineEvent } from "../../hooks/useFocusOutlineEvent";
export interface VariablesGraphProps {
subs: SubsSnapshot;
@ -320,36 +320,6 @@ function useKeydown({
graphEe.on("keydown", async (key) => await keyDownHandler(key));
}
function useFocusOutlineEvent({
epoch,
ee,
}: {
epoch: EventEpoch;
ee: TypedEmitter<GraphMessage>;
}) {
const [isOutlined, setIsOutlined] = useState(false);
useEffect(() => {
ee.on("focusEpoch", (focusEpoch: EventEpoch) => {
if (focusEpoch !== epoch) return;
setIsOutlined(true);
});
}, [ee, epoch]);
useEffect(() => {
if (!isOutlined) return;
const timer = setTimeout(() => {
setIsOutlined(false);
}, 500);
return () => {
clearTimeout(timer);
};
}, [isOutlined]);
return isOutlined;
}
function Graph({
subs,
graphEe,
@ -364,8 +334,9 @@ function Graph({
varEe.current.setMaxListeners(Infinity);
const isOutlined = useFocusOutlineEvent({
epoch: subs.epoch,
ee: graphEe,
value: subs.epoch,
event: "focusEpoch",
});
const [layoutConfig, setLayoutConfig] =