binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-4748] chore: placement helper fn added and code refactor #7627

Browse source 
Co-authored-by: Sriram Veeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
Anmol Singh Bhatia 2025-08-23 00:42:44 +05:30 • committed by GitHub
parent a0f7acae42
commit 706085395e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 55 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

55
packages/propel/src/popover/root.tsx
View file

@ -1,62 +1,15 @@
import * as React from "react";
import { Popover as BasePopover } from "@base-ui-components/react/popover";
// types
export type Placement =
| "auto"
| "auto-start"
| "auto-end"
| "top-start"
| "top-end"
| "bottom-start"
| "bottom-end"
| "right-start"
| "right-end"
| "left-start"
| "left-end"
| "top"
| "bottom"
| "right"
| "left";
type Side = "top" | "bottom" | "left" | "right";
type Align = "start" | "center" | "end";
import { TPlacement, TSide, TAlign, convertPlacementToSideAndAlign } from "../utils/placement";
export interface PopoverContentProps extends React.ComponentProps<typeof BasePopover.Popup> {
placement?: Placement;
align?: Align;
placement?: TPlacement;
align?: TAlign;
sideOffset?: BasePopover.Positioner.Props["sideOffset"];
side?: Side;
side?: TSide;
containerRef?: React.RefObject<HTMLElement>;
}
// placement conversion map
const PLACEMENT_MAP = new Map<Placement, { side: Side; align: Align }>([
["auto", { side: "bottom", align: "center" }],
["auto-start", { side: "bottom", align: "start" }],
["auto-end", { side: "bottom", align: "end" }],
["top", { side: "top", align: "center" }],
["bottom", { side: "bottom", align: "center" }],
["left", { side: "left", align: "center" }],
["right", { side: "right", align: "center" }],
["top-start", { side: "top", align: "start" }],
["top-end", { side: "top", align: "end" }],
["bottom-start", { side: "bottom", align: "start" }],
["bottom-end", { side: "bottom", align: "end" }],
["left-start", { side: "left", align: "start" }],
["left-end", { side: "left", align: "end" }],
["right-start", { side: "right", align: "start" }],
["right-end", { side: "right", align: "end" }],
]);
// conversion function
export function convertPlacementToSideAndAlign(placement: Placement): {
side: Side;
align: Align;
} {
return PLACEMENT_MAP.get(placement) || { side: "bottom", align: "center" };
}
// PopoverContent component
const PopoverContent = React.memo<PopoverContentProps>(function PopoverContent({
children,

54
packages/propel/src/tooltip/root.tsx
View file

@ -1,50 +1,12 @@
import * as React from "react";
import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip";
import { cn } from "@plane/utils";
export type TPosition =
| "top"
| "right"
| "bottom"
| "left"
| "auto"
| "auto-end"
| "auto-start"
| "bottom-start"
| "bottom-end"
| "left-start"
| "left-end"
| "right-start"
| "right-end"
| "top-start"
| "top-end";
type Side = "top" | "bottom" | "left" | "right";
type Align = "start" | "center" | "end";
// placement conversion map
const PLACEMENT_MAP = new Map<TPosition, { side: Side; align: Align }>([
["auto", { side: "bottom", align: "center" }],
["auto-start", { side: "bottom", align: "start" }],
["auto-end", { side: "bottom", align: "end" }],
["top", { side: "top", align: "center" }],
["bottom", { side: "bottom", align: "center" }],
["left", { side: "left", align: "center" }],
["right", { side: "right", align: "center" }],
["top-start", { side: "top", align: "start" }],
["top-end", { side: "top", align: "end" }],
["bottom-start", { side: "bottom", align: "start" }],
["bottom-end", { side: "bottom", align: "end" }],
["left-start", { side: "left", align: "start" }],
["left-end", { side: "left", align: "end" }],
["right-start", { side: "right", align: "start" }],
["right-end", { side: "right", align: "end" }],
]);
import { TPlacement, TSide, TAlign, convertPlacementToSideAndAlign } from "../utils/placement";
type ITooltipProps = {
tooltipHeading?: string;
tooltipContent: string | React.ReactNode;
position?: TPosition;
position?: TPlacement;
children: React.ReactElement;
disabled?: boolean;
className?: string;
@ -52,19 +14,11 @@ type ITooltipProps = {
closeDelay?: number;
isMobile?: boolean;
renderByDefault?: boolean;
side?: Side;
align?: Align;
side?: TSide;
align?: TAlign;
sideOffset?: number;
};
// conversion function
export function convertPlacementToSideAndAlign(placement: TPosition): {
side: Side;
align: Align;
} {
return PLACEMENT_MAP.get(placement) || { side: "bottom", align: "center" };
}
export function Tooltip(props: ITooltipProps) {
const {
tooltipHeading,

47
packages/propel/src/utils/placement.ts Normal file
View file

@ -0,0 +1,47 @@
// types
export type TPlacement =
| "auto"
| "auto-start"
| "auto-end"
| "top-start"
| "top-end"
| "bottom-start"
| "bottom-end"
| "right-start"
| "right-end"
| "left-start"
| "left-end"
| "top"
| "bottom"
| "right"
| "left";
export type TSide = "top" | "bottom" | "left" | "right";
export type TAlign = "start" | "center" | "end";
// placement conversion map
const PLACEMENT_MAP = new Map<TPlacement, { side: TSide; align: TAlign }>([
["auto", { side: "bottom", align: "center" }],
["auto-start", { side: "bottom", align: "start" }],
["auto-end", { side: "bottom", align: "end" }],
["top", { side: "top", align: "center" }],
["bottom", { side: "bottom", align: "center" }],
["left", { side: "left", align: "center" }],
["right", { side: "right", align: "center" }],
["top-start", { side: "top", align: "start" }],
["top-end", { side: "top", align: "end" }],
["bottom-start", { side: "bottom", align: "start" }],
["bottom-end", { side: "bottom", align: "end" }],
["left-start", { side: "left", align: "start" }],
["left-end", { side: "left", align: "end" }],
["right-start", { side: "right", align: "start" }],
["right-end", { side: "right", align: "end" }],
]);
// conversion function
export function convertPlacementToSideAndAlign(placement: TPlacement): {
side: TSide;
align: TAlign;
} {
return PLACEMENT_MAP.get(placement) || { side: "bottom", align: "center" };
}