Skip to content

Commit

Permalink
wip: update
Browse files Browse the repository at this point in the history
  • Loading branch information
@ElaBosak233
ElaBosak233 committed Dec 12, 2024
1 parent f11711c commit 3dab768
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 132 deletions.
50 changes: 28 additions & 22 deletions src/components/core/Dialog/Dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { CSSTransition } from "react-transition-group";
import styles from "./Dialog.module.scss";
import React, { ComponentProps, useRef } from "react";
import { Box } from "../Box";
import { createPortal } from "react-dom";

export interface DialogProps extends ComponentProps<"dialog"> {
open: boolean;
Expand All @@ -22,27 +23,32 @@ export function Dialog(props: DialogProps) {
};

return (
<CSSTransition
in={open}
timeout={150}
unmountOnExit
classNames={{
enter: styles["enter"],
enterActive: styles["enter-active"],
exit: styles["exit"],
exitActive: styles["exit-active"],
}}
nodeRef={nodeRef}
>
<Box
className={styles["root"]}
ref={nodeRef}
onClick={handleOverlayClick}
>
<Box className={styles["positioner"]}>
<Box className={styles["content"]}>{children}</Box>
</Box>
</Box>
</CSSTransition>
<>
{createPortal(
<CSSTransition
in={open}
timeout={150}
unmountOnExit
classNames={{
enter: styles["enter"],
enterActive: styles["enter-active"],
exit: styles["exit"],
exitActive: styles["exit-active"],
}}
nodeRef={nodeRef}
>
<Box
className={styles["root"]}
ref={nodeRef}
onClick={handleOverlayClick}
>
<Box className={styles["positioner"]}>
<Box className={styles["content"]}>{children}</Box>
</Box>
</Box>
</CSSTransition>,
document.body
)}
</>
);
}
101 changes: 53 additions & 48 deletions src/components/core/Tooltip/Tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,76 +40,81 @@ export function Tooltip(props: TooltipProps) {
useEffect(() => {
if (!isHovered || !triggerRef.current || !contentRef.current) return;

const triggerRect = triggerRef.current.getBoundingClientRect();
const contentRect = contentRef.current.getBoundingClientRect();
console.log("triggerRef.current");
console.log(triggerRef?.current?.getBoundingClientRect().top);

const newStyle: CSSProperties = {};

const triggerRect = triggerRef?.current?.getBoundingClientRect();
const contentRect = contentRef?.current?.getBoundingClientRect();

switch (position) {
case "top":
newStyle.top = triggerRect.top - contentRect.height - offset;
newStyle.top =
triggerRect?.top! - contentRect?.height! - offset;
newStyle.left =
triggerRect.left +
(triggerRect.width - contentRect.width) / 2;
triggerRect?.left! +
(triggerRect?.width! - contentRect?.width!) / 2;
break;
case "bottom":
newStyle.top = triggerRect.bottom + offset;
newStyle.top = triggerRect?.bottom! + offset;
newStyle.left =
triggerRect.left +
(triggerRect.width - contentRect.width) / 2;
triggerRect?.left! +
(triggerRect?.width! - contentRect?.width!) / 2;
break;
case "left":
newStyle.top =
triggerRect.top +
(triggerRect.height - contentRect.height) / 2;
newStyle.left = triggerRect.left - contentRect.width - offset;
triggerRect?.top! +
(triggerRect?.height! - contentRect?.height!) / 2;
newStyle.left =
triggerRect?.left! - contentRect?.width! - offset;
break;
case "right":
newStyle.top =
triggerRect.top +
(triggerRect.height - contentRect.height) / 2;
newStyle.left = triggerRect.right + offset;
triggerRect?.top! +
(triggerRect?.height! - contentRect?.height!) / 2;
newStyle.left = triggerRect?.right! + offset;
break;
}

newStyle.position = "absolute";
newStyle.position = "fixed";
setTooltipStyle(newStyle);
}, [isHovered, position, offset]);

const tooltipContent = (
<CSSTransition
in={isHovered}
unmountOnExit
timeout={300}
nodeRef={contentRef}
classNames={{
enter: styles["enter"],
enterActive: styles["enter-active"],
exit: styles["exit"],
exitActive: styles["exit-active"],
}}
>
<Box
className={styles["content"]}
style={tooltipStyle}
ref={contentRef}
>
{content}
</Box>
</CSSTransition>
);
}, [
isHovered,
position,
offset,
triggerRef?.current?.getBoundingClientRect().top,
triggerRef?.current?.getBoundingClientRect().left,
]);

return (
<Box
className={clsx(styles["root"], className)}
style={{
...style,
}}
{...rest}
>
<>
{cloneElement<any>(children, {
ref: triggerRef,
})}
{createPortal(tooltipContent, document.body)}
</Box>
{createPortal(
<CSSTransition
in={isHovered}
unmountOnExit
timeout={300}
nodeRef={contentRef}
classNames={{
enter: styles["enter"],
enterActive: styles["enter-active"],
exit: styles["exit"],
exitActive: styles["exit-active"],
}}
>
<Box
className={styles["content"]}
style={tooltipStyle}
ref={contentRef}
>
{content}
</Box>
</CSSTransition>,
document.body
)}
</>
);
}
41 changes: 14 additions & 27 deletions src/components/core/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,24 @@
export * from "./Avatar";
export * from "./Badge";
export * from "./Box";
export * from "./Button";
export * from "./Checkbox";
export * from "./DatetimeInput";
export * from "./DatetimePicker";
export * from "./Dialog";
export * from "./Flex";
export * from "./Grid";
export * from "./IconButton";
export * from "./Image";
export * from "./InputBase";
export * from "./LoadingOverlay";
export * from "./NumberInput";
export * from "./Pagination";
export * from "./Popover";
export * from "./Stack";
export * from "./Switch";
export * from "./Textarea";
export * from "./TextInput";
export * from "./Toast";
export * from "./Tooltip";
export * from "./Popover";
export * from "./Icon";
export * from "./Pagination";
export * from "./Stack";
// export * from "./Input";
// export * from "./Link";
// export * from "./Loader";
// export * from "./Modal";
// export * from "./Radio";
// export * from "./Select";
// export * from "./Table";
// export * from "./Text";
// export * from "./Typography";
// export * from "./Tabs";
// export * from "./Accordion";
// export * from "./Breadcrumbs";
// export * from "./Divider";
// export * from "./List";
// export * from "./Menu";
// export * from "./Progress";
// export * from "./Slider";
// export * from "./Stepper";
// export * from "./Skeleton";
// export * from "./Snackbar";
// export * from "./Timeline";
// export * from "./Tree";
// export * from "./Alert";
export * from "./Typography";
18 changes: 13 additions & 5 deletions src/components/widgets/ChallengeCard/ChallengeCard.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
position: relative;
border-radius: 12px;
background-color: var(--challenge-card-bg-color);
border: 2.75px solid var(--challenge-card-border-color);
border: 2.75px dotted var(--challenge-card-border-color);
padding: 10px;
transition: all 200ms ease-in-out;

Expand Down Expand Up @@ -39,15 +39,23 @@
}
}

.trapezoid {
position: absolute;
right: -3px;
top: -3px;
width: 75px;
height: 75px;
background-color: var(--challenge-card-trapezoid-color);
clip-path: polygon(100% 100%, 100% 50%, 50% 0, 0% 0);
}

.star {
position: absolute;
top: 15px;
right: 15px;

width: 1.25rem;
height: 1.25rem;

filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.3));
}

.category {
Expand Down Expand Up @@ -77,7 +85,7 @@
width: 7rem;
height: 7rem;

color: var(--challenge-card-icon-color);
color: light-dark(var(--challenge-card-icon-color), #ffffff66);
opacity: 0.5;
transition: all 200ms ease-in-out;

Expand Down Expand Up @@ -114,7 +122,7 @@
height: 2px;
width: 90%;

background-color: var(--challenge-card-icon-color);
background-color: light-dark(var(--challenge-card-icon-color), #ffffff66);
transition: all 200ms ease-in-out;

transform: translateY(-50%);
Expand Down
Loading

0 comments on commit 3dab768

Please sign in to comment.