From e594bac59d42e7070f6909b72036087fa1ff173a Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia Date: Fri, 22 Aug 2025 16:04:37 +0530 Subject: [PATCH] chore: placement helper fn added and code refactor --- packages/propel/src/popover/root.tsx | 55 ++------------------------ packages/propel/src/tooltip/root.tsx | 54 ++----------------------- packages/propel/src/utils/placement.ts | 47 ++++++++++++++++++++++ 3 files changed, 55 insertions(+), 101 deletions(-) create mode 100644 packages/propel/src/utils/placement.ts diff --git a/packages/propel/src/popover/root.tsx b/packages/propel/src/popover/root.tsx index 4509b1c40fe..bef1b72981c 100644 --- a/packages/propel/src/popover/root.tsx +++ b/packages/propel/src/popover/root.tsx @@ -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 { - placement?: Placement; - align?: Align; + placement?: TPlacement; + align?: TAlign; sideOffset?: BasePopover.Positioner.Props["sideOffset"]; - side?: Side; + side?: TSide; containerRef?: React.RefObject; } -// placement conversion map -const PLACEMENT_MAP = new Map([ - ["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(function PopoverContent({ children, diff --git a/packages/propel/src/tooltip/root.tsx b/packages/propel/src/tooltip/root.tsx index f3ab8d3e338..3f71950f035 100644 --- a/packages/propel/src/tooltip/root.tsx +++ b/packages/propel/src/tooltip/root.tsx @@ -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([ - ["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, diff --git a/packages/propel/src/utils/placement.ts b/packages/propel/src/utils/placement.ts new file mode 100644 index 00000000000..b150127373a --- /dev/null +++ b/packages/propel/src/utils/placement.ts @@ -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([ + ["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" }; +}