From 44ea49e856313894a9c6854b8160c8e1c140015f Mon Sep 17 00:00:00 2001 From: Gilad Gray Date: Thu, 15 Nov 2018 13:43:11 -0500 Subject: [PATCH] PopoverPosition = Position + auto values --- .../popover/popoverMigrationUtils.ts | 3 +- .../components/popover/popoverSharedProps.ts | 11 ++++- .../examples/core-examples/popoverExample.tsx | 40 +++++++++---------- 3 files changed, 31 insertions(+), 23 deletions(-) diff --git a/packages/core/src/components/popover/popoverMigrationUtils.ts b/packages/core/src/components/popover/popoverMigrationUtils.ts index 234cb45d39..f93908d13f 100644 --- a/packages/core/src/components/popover/popoverMigrationUtils.ts +++ b/packages/core/src/components/popover/popoverMigrationUtils.ts @@ -6,12 +6,13 @@ import { Placement } from "popper.js"; import { Position } from "../../common/position"; +import { PopoverPosition } from "./popoverSharedProps"; /** * Convert a position to a placement. * @param position the position to convert */ -export function positionToPlacement(position: Position | "auto" | "auto-start" | "auto-end"): Placement { +export function positionToPlacement(position: PopoverPosition): Placement { /* istanbul ignore next */ switch (position) { case Position.TOP_LEFT: diff --git a/packages/core/src/components/popover/popoverSharedProps.ts b/packages/core/src/components/popover/popoverSharedProps.ts index 734c24e5e1..e0ccac0f88 100644 --- a/packages/core/src/components/popover/popoverSharedProps.ts +++ b/packages/core/src/components/popover/popoverSharedProps.ts @@ -12,6 +12,15 @@ import { IOverlayableProps } from "../overlay/overlay"; // re-export this symbol for library consumers export { PopperModifiers }; +/** `Position` with `"auto"` values, used by `Popover` and `Tooltip`. */ +export const PopoverPosition = { + ...Position, + AUTO: "auto" as "auto", + AUTO_END: "auto-end" as "auto-end", + AUTO_START: "auto-start" as "auto-start", +}; +export type PopoverPosition = typeof PopoverPosition[keyof typeof PopoverPosition]; + /** Props shared between `Popover` and `Tooltip`. */ export interface IPopoverSharedProps extends IOverlayableProps, IProps { /** @@ -109,7 +118,7 @@ export interface IPopoverSharedProps extends IOverlayableProps, IProps { * user scrolls around. * @default "auto" */ - position?: Position | "auto" | "auto-start" | "auto-end"; + position?: PopoverPosition; /** * Space-delimited string of class names applied to the target element. diff --git a/packages/docs-app/src/examples/core-examples/popoverExample.tsx b/packages/docs-app/src/examples/core-examples/popoverExample.tsx index d6ee625268..b8a62fd183 100644 --- a/packages/docs-app/src/examples/core-examples/popoverExample.tsx +++ b/packages/docs-app/src/examples/core-examples/popoverExample.tsx @@ -22,7 +22,7 @@ import { MenuItem, Popover, PopoverInteractionKind, - Position, + PopoverPosition, RadioGroup, Slider, Switch, @@ -42,22 +42,22 @@ const INTERACTION_KINDS = [ { label: "Hover (target only)", value: PopoverInteractionKind.HOVER_TARGET_ONLY.toString() }, ]; -const VALID_POSITIONS: Array = [ - "auto", - "auto-start", - "auto-end", - Position.TOP_LEFT, - Position.TOP, - Position.TOP_RIGHT, - Position.RIGHT_TOP, - Position.RIGHT, - Position.RIGHT_BOTTOM, - Position.BOTTOM_LEFT, - Position.BOTTOM, - Position.BOTTOM_RIGHT, - Position.LEFT_TOP, - Position.LEFT, - Position.LEFT_BOTTOM, +const VALID_POSITIONS: PopoverPosition[] = [ + PopoverPosition.AUTO, + PopoverPosition.AUTO_START, + PopoverPosition.AUTO_END, + PopoverPosition.TOP_LEFT, + PopoverPosition.TOP, + PopoverPosition.TOP_RIGHT, + PopoverPosition.RIGHT_TOP, + PopoverPosition.RIGHT, + PopoverPosition.RIGHT_BOTTOM, + PopoverPosition.BOTTOM_LEFT, + PopoverPosition.BOTTOM, + PopoverPosition.BOTTOM_RIGHT, + PopoverPosition.LEFT_TOP, + PopoverPosition.LEFT, + PopoverPosition.LEFT_BOTTOM, ]; const POPPER_DOCS = "https://popper.js.org/popper-documentation.html#modifiers"; @@ -71,7 +71,7 @@ export interface IPopoverExampleState { isOpen?: boolean; minimal?: boolean; modifiers?: PopperJS.Modifiers; - position?: Position | "auto" | "auto-start" | "auto-end"; + position?: PopoverPosition; sliderValue?: number; usePortal?: boolean; } @@ -101,9 +101,7 @@ export class PopoverExample extends React.PureComponent - this.setState({ position }), - ); + private handlePositionChange = handleStringChange((position: PopoverPosition) => this.setState({ position })); private handleBoundaryChange = handleStringChange((boundary: PopperJS.Boundary) => this.setState({ modifiers: {