refactor(CPopover, CTooltip): improve syntax

Author: mrholek

packages/coreui-react/src/components/popover/CPopover.tsx

@@ -3,12 +3,11 @@ import { createPortal } from 'react-dom'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
-import { Placement } from '@popperjs/core'
 
 import { usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
-import { isRTL } from '../../utils'
+import { getRTLPlacement } from '../../utils'
 
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
   /**
@@ -69,20 +68,6 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
   visible?: boolean
 }
 
-const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
-  switch (placement) {
-    case 'right': {
-      return isRTL(element) ? 'left' : 'right'
-    }
-    case 'left': {
-      return isRTL(element) ? 'right' : 'left'
-    }
-    default: {
-      return placement as Placement
-    }
-  }
-}
-
 export const CPopover: FC<CPopoverProps> = ({
   children,
   animation = true,
@@ -127,7 +112,7 @@ export const CPopover: FC<CPopoverProps> = ({
         },
       },
     ],
-    placement: getPlacement(placement, togglerRef.current),
+    placement: getRTLPlacement(placement, togglerRef.current),
   }
 
   useEffect(() => {

packages/coreui-react/src/components/tooltip/CTooltip.tsx

@@ -3,12 +3,11 @@ import { createPortal } from 'react-dom'
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { Transition } from 'react-transition-group'
-import { Placement } from '@popperjs/core'
 
 import { usePopper } from '../../hooks'
 import { fallbackPlacementsPropType, triggerPropType } from '../../props'
 import type { Placements, Triggers } from '../../types'
-import { isRTL } from '../../utils'
+import { getRTLPlacement } from '../../utils'
 
 export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
   /**
@@ -65,20 +64,6 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
   visible?: boolean
 }
 
-const getPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
-  switch (placement) {
-    case 'right': {
-      return isRTL(element) ? 'left' : 'right'
-    }
-    case 'left': {
-      return isRTL(element) ? 'right' : 'left'
-    }
-    default: {
-      return placement as Placement
-    }
-  }
-}
-
 export const CTooltip: FC<CTooltipProps> = ({
   children,
   animation = true,
@@ -122,7 +107,7 @@ export const CTooltip: FC<CTooltipProps> = ({
         },
       },
     ],
-    placement: getPlacement(placement, togglerRef.current),
+    placement: getRTLPlacement(placement, togglerRef.current),
   }
 
   useEffect(() => {

packages/coreui-react/src/utils/getRTLPlacement.ts

@@ -0,0 +1,18 @@
+import { Placement } from '@popperjs/core'
+import { isRTL } from '../utils'
+
+const getRTLPlacement = (placement: string, element: HTMLDivElement | null): Placement => {
+  switch (placement) {
+    case 'right': {
+      return isRTL(element) ? 'left' : 'right'
+    }
+    case 'left': {
+      return isRTL(element) ? 'right' : 'left'
+    }
+    default: {
+      return placement as Placement
+    }
+  }
+}
+
+export default getRTLPlacement

packages/coreui-react/src/utils/index.ts

@@ -1,4 +1,5 @@
+import getRTLPlacement from './getRTLPlacement'
 import isInViewport from './isInViewport'
 import isRTL from './isRTL'
 
-export { isInViewport, isRTL }
+export { getRTLPlacement, isInViewport, isRTL }