Изменение Tooltip и Popover

ui-parts/condition/package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "@emotion/react": "11.9.3",
     "@emotion/styled": "11.9.3",
+    "@types/react": "18.2.20",
     "react": "18.2.0"
   },
   "peerDependencies": {

ui-parts/condition/src/condition.component.tsx

@@ -11,30 +11,13 @@ export const Condition: FC<ConditionProps> = ({
   smoothDuration = 0.3,
   smoothPattern = 'in-and-out',
   children,
-  /* eslint-disable consistent-return */
 }) => {
+  if (!match) return null
+
   if (smooth) {
     if (smoothPattern === 'in-and-out') {
       return (
         <AnimatePresence>
-          {match && (
-            <motion.div
-              style={{ display: 'flex', width: '100%', height: '100%' }}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: smoothDuration }}
-            >
-              {children}
-            </motion.div>
-          )}
-        </AnimatePresence>
-      )
-    }
-
-    if (smoothPattern === 'in') {
-      return (
-        match && (
           <motion.div
             style={{ display: 'flex', width: '100%', height: '100%' }}
             initial={{ opacity: 0 }}
@@ -44,28 +27,41 @@ export const Condition: FC<ConditionProps> = ({
           >
             {children}
           </motion.div>
-        )
+        </AnimatePresence>
+      )
+    }
+
+    if (smoothPattern === 'in') {
+      return (
+        <motion.div
+          style={{ display: 'flex', width: '100%', height: '100%' }}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: smoothDuration }}
+        >
+          {children}
+        </motion.div>
       )
     }
 
     if (smoothPattern === 'out') {
       return (
         <AnimatePresence>
-          {match && (
-            <motion.div
-              style={{ display: 'flex', width: '100%', height: '100%' }}
-              initial={{ opacity: 1 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              transition={{ duration: smoothDuration }}
-            >
-              {children}
-            </motion.div>
-          )}
+          <motion.div
+            style={{ display: 'flex', width: '100%', height: '100%' }}
+            initial={{ opacity: 1 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: smoothDuration }}
+          >
+            {children}
+          </motion.div>
         </AnimatePresence>
       )
     }
   }
 
-  if (match) return children
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{children}</>
 }

ui-parts/tooltip/package.json

@@ -12,6 +12,7 @@
     "postpack": "rm -rf dist"
   },
   "devDependencies": {
+    "@atls-ui-parts/condition": "workspace:0.0.5",
     "@atls-ui-parts/layout": "workspace:0.0.7",
     "@emotion/styled": "11.9.3",
     "@testing-library/react": "13.3.0",

ui-parts/tooltip/src/container/container.component.tsx

@@ -1,6 +1,25 @@
-import styled                  from '@emotion/styled'
+import styled                      from '@emotion/styled'
 
-import { ContainerElement }    from './container.element'
-import { baseContainerStyles } from './container.styles'
+import React                       from 'react'
+import { Arrow }                   from 'react-laag'
+import { forwardRef }              from 'react'
 
-export const Container = styled(ContainerElement)(baseContainerStyles)
+import { Condition }               from '@atls-ui-parts/condition'
+
+import { ContainerElement }        from './container.element'
+import { ContainerComponentProps } from './container.interfaces'
+import { baseContainerStyles }     from './container.styles'
+
+const StyledContainer = styled(ContainerElement)(baseContainerStyles)
+
+export const Container = forwardRef<HTMLDivElement, ContainerComponentProps>((
+  { text, showArrow, arrowOptions, arrowProps, layerSide, ...props },
+  ref
+) => (
+  <StyledContainer ref={ref} {...props}>
+    {text}
+    <Condition match={Boolean(showArrow)}>
+      <Arrow {...layerSide} {...arrowOptions} {...arrowProps} />
+    </Condition>
+  </StyledContainer>
+))

ui-parts/tooltip/src/container/container.element.tsx

@@ -1,11 +1,10 @@
 import React                     from 'react'
-import { FunctionComponent }     from 'react'
 import { motion }                from 'framer-motion'
 import { forwardRef }            from 'react'
 
 import { ContainerElementProps } from './container.interfaces'
 
-export const ContainerElement: FunctionComponent<ContainerElementProps> = forwardRef((
+export const ContainerElement = forwardRef<HTMLDivElement, ContainerElementProps>((
   { animate, ...props },
   ref
 ) => (

ui-parts/tooltip/src/container/container.interfaces.ts

@@ -1,5 +1,24 @@
-export type ContainerElementProps = {
+import { LayerSide }          from 'react-laag'
+import { UseLayerArrowProps } from 'react-laag'
+
+export interface ArrowOptions {
+  angle?: number | undefined
+  size?: number | undefined
+  roundness?: number | undefined
+  borderWidth?: number | undefined
+  borderColor?: string | undefined
+  backgroundColor?: string | undefined
+}
+export interface ContainerElementProps {
   animate?: boolean
   ref?: any
   style?: any
 }
+
+export interface ContainerComponentProps extends ContainerElementProps {
+  text?: string | number
+  showArrow?: boolean
+  layerSide?: LayerSide
+  arrowProps?: UseLayerArrowProps
+  arrowOptions?: ArrowOptions
+}

ui-parts/tooltip/src/container/index.ts

@@ -1,2 +1,3 @@
 export * from './container.component'
 export * from './container.element'
+export * from './container.interfaces'

ui-parts/tooltip/src/index.ts

@@ -1,3 +1,5 @@
 export * from './tooltip.component'
 export * from './tooltip.interfaces'
+export * from './use-tooltip.hook'
+export { ArrowOptions } from './container'
 export { Arrow } from 'react-laag'

ui-parts/tooltip/src/tooltip.component.tsx

@@ -1,140 +1,30 @@
 import React                 from 'react'
-import { AnimatePresence }   from 'framer-motion'
 import { Children }          from 'react'
-import { PropsWithChildren } from 'react'
 import { FC }                from 'react'
-import { Arrow }             from 'react-laag'
+import { PropsWithChildren } from 'react'
 import { cloneElement }      from 'react'
-import { forwardRef }        from 'react'
-import { useLayer }          from 'react-laag'
 
 import { Container }         from './container'
 import { TooltipProps }      from './tooltip.interfaces'
-import { useClick }          from './hooks'
-import { useContextMenu }    from './hooks'
-import { useHover }          from './hooks'
-
-const doNothing = () => {
-  // do nothing
-}
-
-const DefaultContainer = forwardRef(({ text, arrow, ...props }: any, ref) => (
-  <Container ref={ref} {...props}>
-    {text}
-    {arrow}
-  </Container>
-))
+import { useTooltip }        from './use-tooltip.hook'
 
 export const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
-  text,
-  trigger = 'hover',
-  showArrow,
-  mouseEnterDelay,
-  mouseLeaveDelay,
-  anchor,
-  closeOnOutsideClick,
-  isOpen,
+  text = 'Text',
   children,
-  container,
-  animate,
-  arrowOptions,
   ...props
 }) => {
-  const [isOver, hoverProps] = useHover({
-    delayEnter: mouseEnterDelay,
-    delayLeave: mouseLeaveDelay,
-  })
-  const [isContextMenu, closeContextMenu, contextMenuProps] = useContextMenu()
-  const [isClicked, closeClicked, clickedProps] = useClick()
-
-  const getClose = (): (() => void) => {
-    if (trigger === 'click') return closeClicked
-    if (trigger === 'menu') return closeContextMenu
-
-    return doNothing
-  }
-
-  const getTrigger = (): boolean => {
-    if (typeof isOpen === 'boolean') {
-      return isOpen
-    }
-    if (trigger === 'hover') return isOver
-    if (trigger === 'click') return isClicked
-    if (trigger === 'menu') return isContextMenu
-
-    return false
-  }
-
-  const { triggerProps, layerProps, layerSide, arrowProps, renderLayer } = useLayer({
-    isOpen: getTrigger(),
-    onOutsideClick: closeOnOutsideClick ? getClose() : doNothing,
-    placement: anchor,
-    ...props,
-  })
-
-  const getTriggerProps = () => {
-    if (trigger === 'hover') return { ...triggerProps, ...hoverProps }
-    if (trigger === 'click') return { ...triggerProps, ...clickedProps }
-    if (trigger === 'menu') return { ...triggerProps, ...contextMenuProps }
-
-    return triggerProps
-  }
-
-  const getChildrenControls = (): [boolean, () => void] => {
-    if (trigger === 'click' || trigger === 'menu') return [getTrigger(), getClose()]
-
-    return [getTrigger(), doNothing]
-  }
-
-  const getContainerControls = (): [() => void] => {
-    if (trigger === 'click' || trigger === 'menu') return [getClose()]
-
-    return [doNothing]
-  }
+  const { isOpen, close, triggerProps, render } = useTooltip({ ...props })
 
   const renderChildren = () => {
-    if (typeof children === 'function') return children(...getChildrenControls())
-
-    return Children.only(
-      cloneElement(children as any, {
-        ...getTriggerProps(),
-      })
-    )
-  }
-  const renderContainerWithoutArrow = () => {
-    if (typeof container === 'function') return container(...getContainerControls())
-
-    return cloneElement(container!, {
-      ...layerProps,
-      text,
-    })
-  }
-  const renderContainerWithArrow = () => {
-    const renderedContainer = renderContainerWithoutArrow()
-
-    const arrow = <Arrow {...layerSide} {...arrowProps} {...arrowOptions} />
-
-    return cloneElement(renderedContainer, { arrow })
-  }
-  const renderContainer = () => {
-    if (showArrow) return renderContainerWithArrow()
-
-    return renderContainerWithoutArrow()
-  }
+    if (typeof children === 'function') return children(isOpen, close)
 
-  if (animate) {
-    return (
-      <>
-        {renderChildren()}
-        {renderLayer(<AnimatePresence>{getTrigger() && renderContainer()}</AnimatePresence>)}
-      </>
-    )
+    return Children.only(cloneElement(children as any, triggerProps))
   }
 
   return (
     <>
       {renderChildren()}
-      {renderLayer(getTrigger() && renderContainer())}
+      {render({ text })}
     </>
   )
 }
@@ -153,6 +43,6 @@ Tooltip.defaultProps = {
   triggerOffset: 8,
   animate: false,
   closeOnOutsideClick: true,
-  container: <DefaultContainer />,
+  container: <Container />,
   text: 'Text',
 }

ui-parts/tooltip/src/tooltip.interfaces.ts

@@ -1,32 +1,17 @@
 import { UseLayerOptions } from 'react-laag'
 import { Placement }       from 'react-laag'
 
-export type TooltipTrigger = 'click' | 'hover' | 'menu'
+import { ArrowOptions }    from './container'
 
-export type LayerDimensions = (layerSide: string) => {
-  width: number
-  height: number
-}
+export type TooltipTrigger = 'click' | 'hover' | 'menu'
 
 export type ContainerFunction = (close: () => void) => React.ReactElement
 
 export type ChildrenFunction = (trigger: boolean, close: () => void) => React.ReactElement
 
-export interface ArrowOptions {
-  angle?: number | undefined
-  size?: number | undefined
-  roundness?: number | undefined
-  borderWidth?: number | undefined
-  borderColor?: string | undefined
-  backgroundColor?: string | undefined
-}
+type OmitOptions = 'placement' | 'onOutsideClick' | 'isOpen' | 'container' | 'trigger'
 
-export interface TooltipProps
-  extends Omit<
-    UseLayerOptions,
-    'placement' | 'onOutsideClick' | 'isOpen' | 'container' | 'trigger'
-  > {
-  text?: string | number
+export interface UseTooltipOptions extends Omit<UseLayerOptions, OmitOptions> {
   trigger?: TooltipTrigger
   showArrow?: boolean
   mouseEnterDelay?: number
@@ -36,6 +21,10 @@ export interface TooltipProps
   animate?: boolean
   isOpen?: boolean
   container?: React.ReactElement | ContainerFunction
-  children: React.ReactElement | ChildrenFunction
   arrowOptions?: ArrowOptions
 }
+
+export interface TooltipProps extends UseTooltipOptions {
+  text?: string | number
+  children: React.ReactElement | ChildrenFunction
+}