初始化

wwf

3 天以前 a430284aa21e3ae1f0d5654e55b2ad2852519cc2

 app/components/base/popover/index.tsx

@@ -1,4 +1,4 @@
import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react'
import { Popover, Transition } from '@headlessui/react'
import { Fragment, cloneElement, useRef } from 'react'
import cn from '@/utils/classnames'

@@ -9,7 +9,7 @@

type IPopover = {
  className?: string
  htmlContent: React.ReactNode
  htmlContent: React.ReactElement<HtmlContentProps>
  popupClassName?: string
  trigger?: 'click' | 'hover'
  position?: 'bottom' | 'br' | 'bl'
@@ -33,15 +33,15 @@
  disabled = false,
}: IPopover) {
  const buttonRef = useRef<HTMLButtonElement>(null)
  const timeOutRef = useRef<number | null>(null)
  const timeOutRef = useRef<NodeJS.Timeout | null>(null)

  const onMouseEnter = (isOpen: boolean) => {
    timeOutRef.current && window.clearTimeout(timeOutRef.current)
    timeOutRef.current && clearTimeout(timeOutRef.current)
    !isOpen && buttonRef.current?.click()
  }

  const onMouseLeave = (isOpen: boolean) => {
    timeOutRef.current = window.setTimeout(() => {
    timeOutRef.current = setTimeout(() => {
      isOpen && buttonRef.current?.click()
    }, timeoutDuration)
  }
@@ -59,23 +59,23 @@
                  onMouseEnter: () => onMouseEnter(open),
                })}
            >
              <PopoverButton
              <Popover.Button
                ref={buttonRef}
                disabled={disabled}
                className={cn(
                  'group inline-flex items-center rounded-lg border border-components-button-secondary-border bg-components-button-secondary-bg px-3 py-2 text-base font-medium hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover focus:outline-none',
                  open && 'border-components-button-secondary-border bg-components-button-secondary-bg-hover',
                  'group inline-flex items-center bg-components-button-secondary-bg px-3 py-2 rounded-lg text-base border border-components-button-secondary-border font-medium hover:bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover focus:outline-none',
                  open && 'bg-components-button-secondary-bg-hover border-components-button-secondary-border',
                  (btnClassName && typeof btnClassName === 'string') && btnClassName,
                  (btnClassName && typeof btnClassName !== 'string') && btnClassName?.(open),
                )}
              >
                {btnElement}
              </PopoverButton>
              </Popover.Button>
              <Transition as={Fragment}>
                <PopoverPanel
                <Popover.Panel
                  className={cn(
                    'absolute z-10 mt-1 w-full max-w-sm px-4 sm:px-0 lg:max-w-3xl',
                    position === 'bottom' && 'left-1/2 -translate-x-1/2',
                    'absolute z-10 w-full max-w-sm px-4 mt-1 sm:px-0 lg:max-w-3xl',
                    position === 'bottom' && '-translate-x-1/2 left-1/2',
                    position === 'bl' && 'left-0',
                    position === 'br' && 'right-0',
                    className,
@@ -90,7 +90,7 @@
                >
                  {({ close }) => (
                    <div
                      className={cn('w-fit min-w-[130px] overflow-hidden rounded-lg bg-components-panel-bg shadow-lg ring-1 ring-black/5', popupClassName)}
                      className={cn('overflow-hidden bg-components-panel-bg w-fit min-w-[130px] rounded-lg shadow-lg ring-1 ring-black ring-opacity-5', popupClassName)}
                      {...(trigger !== 'hover'
                        ? {}
                        : {
@@ -99,7 +99,7 @@
                        })
                      }
                    >
                      {cloneElement(htmlContent as React.ReactElement, {
                      {cloneElement(htmlContent as React.ReactElement<HtmlContentProps>, {
                        onClose: () => onMouseLeave(open),
                        ...(manualClose
                          ? {
@@ -109,7 +109,7 @@
                      })}
                    </div>
                  )}
                </PopoverPanel>
                </Popover.Panel>
              </Transition>
            </div>
          </>