@kaitify/react 0.0.1-beta.1

package/src/core/popover/popover.tsx

@@ -0,0 +1,286 @@
+import React, { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import classNames from 'classnames'
+import { createPopper, Instance } from '@popperjs/core'
+import { event as DapEvent } from 'dap-util'
+import { CSSTransition } from 'react-transition-group'
+import { useEditor } from '@/hooks'
+import { Teleport } from '../teleport'
+import { PopoverPropsType, PopoverPlacementType, PopoverRefType } from './props'
+import styles from './style.module.less'
+
+/**
+ * 浮层组件
+ */
+const Popover = forwardRef<PopoverRefType, PopoverPropsType>(({ placement = 'bottom', trigger = 'hover', delay = 0, animation = 'translate', ...props }, ref) => {
+  //唯一id
+  const uid = useId()
+  //深色模式
+  const { dark } = useEditor()
+  //是否显示
+  const [visible, setVisible] = useState(false)
+  //浮层真实位置
+  const [realPlacement, setRealPlacement] = useState<PopoverPlacementType>(placement)
+  //目标元素
+  const referRef = useRef<HTMLDivElement | null>(null)
+  //三角形元素
+  const arrowRef = useRef<HTMLDivElement | null>(null)
+  //浮层元素
+  const popoverRef = useRef<HTMLDivElement | null>(null)
+  //popperjs实例
+  const popperInstance = useRef<Instance | undefined>()
+
+  //浮层剩余位置
+  const popoverRemainingPlacements = useMemo<PopoverPlacementType[]>(() => {
+    if (placement.startsWith('top')) {
+      return (['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'] as PopoverPlacementType[]).filter(item => item != placement)
+    }
+    if (placement.startsWith('bottom')) {
+      return (['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end'] as PopoverPlacementType[]).filter(item => item != placement)
+    }
+    if (placement.startsWith('left')) {
+      return (['left', 'left-start', 'left-end', 'right', 'right-start', 'right-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'] as PopoverPlacementType[]).filter(item => item != placement)
+    }
+    return (['right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'] as PopoverPlacementType[]).filter(item => item != placement)
+  }, [placement])
+
+  //更新浮层位置
+  const update = async () => {
+    if (popperInstance.current) {
+      await popperInstance.current.update()
+      setRealPlacement(popperInstance.current.state.placement)
+    }
+  }
+  //创建popperjs实例
+  const createPopperjs = () => {
+    popperInstance.current = createPopper(referRef.current as HTMLElement, popoverRef.current as HTMLElement, {
+      placement: placement,
+      modifiers: [
+        //控制浮层的位置计算方式，包括使用 GPU 加速、是否启用自适应等
+        {
+          name: 'computeStyles',
+          options: {
+            adaptive: true, //启用自适应
+            gpuAcceleration: false //关闭GPU加速
+          }
+        },
+        //如果弹出框在预设的位置被页面边界或其他限制遮挡，popperjs会自动尝试翻转到其他位置。它会检查可用的视窗空间并自动调整位置，确保内容不会超出视窗或被遮挡。
+        {
+          name: 'flip',
+          options: {
+            enabled: true,
+            fallbackPlacements: popoverRemainingPlacements
+          }
+        },
+        //控制offset为0
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 0]
+          }
+        },
+        //设置箭头元素的位置，使其始终指向目标元素
+        {
+          name: 'arrow',
+          options: {
+            element: arrowRef.current!
+          }
+        },
+        //确保浮层不会超出指定的边界区域，通常用于当浮层过大或目标位置变化时自动修正浮层位置
+        {
+          name: 'preventOverflow',
+          options: {
+            enabled: true,
+            boundary: 'viewport',
+            padding: 5
+          }
+        }
+      ]
+    })
+  }
+  //销毁popperjs实例
+  const destroyPopperjs = () => {
+    if (popperInstance.current) {
+      popperInstance.current.destroy()
+      popperInstance.current = undefined
+    }
+  }
+  //显示浮层
+  const showPopover = () => {
+    if (props.disabled) {
+      return
+    }
+    //延迟显示
+    if (delay > 0) {
+      setTimeout(() => {
+        setVisible(true)
+      }, delay)
+      return
+    }
+    //正常显示
+    setVisible(true)
+  }
+  //隐藏浮层
+  const hidePopover = () => {
+    if (props.disabled) {
+      return
+    }
+    setVisible(false)
+  }
+
+  //浮层显示前
+  const onShow = () => {
+    props.onShow?.(popoverRef.current as HTMLElement)
+  }
+  //浮层显示时
+  const onShowing = () => {
+    createPopperjs()
+    props.onShowing?.(popoverRef.current as HTMLElement)
+  }
+  //浮层显示后
+  const onShown = () => {
+    props.onShown?.(popoverRef.current as HTMLElement)
+  }
+  //浮层隐藏前
+  const onHide = () => {
+    props.onHide?.(popoverRef.current as HTMLElement)
+  }
+  //浮层隐藏时
+  const onHiding = () => {
+    props.onHiding?.(popoverRef.current as HTMLElement)
+  }
+  //浮层隐藏后
+  const onHidden = () => {
+    destroyPopperjs()
+    props.onHidden?.(popoverRef.current as HTMLElement)
+  }
+
+  //鼠标移入
+  const handleMouseEnter = () => {
+    if (trigger != 'hover') {
+      return
+    }
+    showPopover()
+  }
+  //鼠标移出
+  const handleMouseLeave = (e: React.MouseEvent) => {
+    if (trigger != 'hover') {
+      return
+    }
+    //移出到目标元素里
+    if (referRef.current?.contains(e.relatedTarget as HTMLElement)) {
+      return
+    }
+    //移出到浮层元素里
+    if (popoverRef.current?.contains(e.relatedTarget as HTMLElement)) {
+      return
+    }
+    hidePopover()
+  }
+  //点击
+  const handleClick = () => {
+    if (trigger != 'click') {
+      return
+    }
+    if (visible) hidePopover()
+    else showPopover()
+  }
+
+  useImperativeHandle(ref, () => ({
+    visible,
+    showPopover,
+    hidePopover,
+    popperInstance,
+    realPlacement,
+    update
+  }))
+
+  //监听外部改变placement，更新poperjs对象
+  useEffect(() => {
+    //更新realPlacement的值
+    setRealPlacement(placement)
+    if (popperInstance.current && visible) {
+      popperInstance.current.state.options.placement = placement
+      popperInstance.current.state.options.modifiers.find(mod => mod.name === 'flip').options.fallbackPlacements = popoverRemainingPlacements
+      update()
+    }
+  }, [placement])
+
+  //点击其他地方关闭浮层
+  useEffect(() => {
+    DapEvent.on(document.documentElement, `click.kaitify-popover-${uid}`, e => {
+      //点击目标元素
+      if (referRef.current?.contains(e.target as HTMLElement)) {
+        return
+      }
+      //点击浮层元素
+      if (popoverRef.current?.contains(e.target as HTMLElement)) {
+        return
+      }
+      //关闭浮层
+      hidePopover()
+    })
+    return () => {
+      destroyPopperjs()
+      DapEvent.off(document.documentElement, `click.kaitify-popover-${uid}`)
+    }
+  }, [])
+
+  return (
+    <>
+      <div
+        ref={referRef}
+        className={classNames(styles['kaitify-popover-refer'], {
+          [styles['kaitify-dark']]: dark
+        })}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleClick}
+      >
+        {props.refer}
+      </div>
+      <Teleport to='body'>
+        <CSSTransition
+          in={visible}
+          timeout={200}
+          classNames={{
+            enter: animation === 'translate' ? styles['kaitify-popover-translate-enter'] : styles['kaitify-popover-fade-enter'],
+            enterActive: animation === 'translate' ? styles['kaitify-popover-translate-enter-active'] : styles['kaitify-popover-fade-enter-active'],
+            exit: animation === 'translate' ? styles['kaitify-popover-translate-exit'] : styles['kaitify-popover-fade-exit'],
+            exitActive: animation === 'translate' ? styles['kaitify-popover-translate-exit-active'] : styles['kaitify-popover-fade-exit-active']
+          }}
+          nodeRef={popoverRef}
+          unmountOnExit
+          onEnter={onShow}
+          onEntering={onShowing}
+          onEntered={onShown}
+          onExit={onHide}
+          onExiting={onHiding}
+          onExited={onHidden}
+        >
+          <div
+            ref={popoverRef}
+            className={classNames(styles['kaitify-popover'], {
+              [styles['kaitify-dark']]: dark
+            })}
+            onMouseLeave={handleMouseLeave}
+            data-arrow={props.arrow}
+            data-placement={realPlacement}
+            style={{ zIndex: props.zIndex ?? 10 }}
+          >
+            {/* 主体 */}
+            <div className={styles['kaitify-popover-wrapper']}>
+              {/* 内容区域 */}
+              <div className={styles['kaitify-popover-content']} style={{ width: props.width ?? 'auto', maxHeight: props.maxHeight ?? '', minWidth: props.minWidth ?? '' }}>
+                {props.children}
+              </div>
+              {/* arrow */}
+              {props.arrow && <div ref={arrowRef} className={styles['kaitify-popover-arrow']} data-placement={realPlacement} />}
+            </div>
+          </div>
+        </CSSTransition>
+      </Teleport>
+    </>
+  )
+})
+
+export default Popover

package/src/core/popover/props.ts

@@ -0,0 +1,97 @@
+import { Instance } from '@popperjs/core'
+import { ReactNode } from 'react'
+
+/**
+ * 浮层位置类型
+ */
+export type PopoverPlacementType = 'auto' | 'auto-start' | 'auto-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end'
+
+/**
+ * 浮层组件属性类型
+ */
+export type PopoverPropsType = {
+  /**
+   * 浮层宽度
+   */
+  width?: string | number
+  /**
+   * 浮层最小宽度
+   */
+  minWidth?: string | number
+  /**
+   * 浮层最大高度
+   */
+  maxHeight?: string | number
+  /**
+   * 浮层位置
+   */
+  placement?: PopoverPlacementType
+  /**
+   * 是否显示三角形
+   */
+  arrow?: boolean
+  /**
+   * 触发浮层的方式
+   */
+  trigger?: 'hover' | 'click' | 'custom'
+  /**
+   * 浮层显示动画
+   */
+  animation?: 'fade' | 'translate'
+  /**
+   * 浮层层级
+   */
+  zIndex?: number
+  /**
+   * 显示延迟时间
+   */
+  delay?: number
+  /**
+   * 是否禁用浮层
+   */
+  disabled?: boolean
+  /**
+   * 目标元素插槽
+   */
+  refer: ReactNode
+  /**
+   * 浮层内容插槽
+   */
+  children: ReactNode
+  /**
+   * 浮层显示前触发的事件
+   */
+  onShow?: (el: Element) => void
+  /**
+   * 浮层显示时触发的事件
+   */
+  onShowing?: (el: Element) => void
+  /**
+   * 浮层显示后触发的事件
+   */
+  onShown?: (el: Element) => void
+  /**
+   * 浮层隐藏前触发的事件
+   */
+  onHide?: (el: Element) => void
+  /**
+   * 浮层隐藏时触发的事件
+   */
+  onHiding?: (el: Element) => void
+  /**
+   * 浮层隐藏后触发的事件
+   */
+  onHidden?: (el: Element) => void
+}
+
+/**
+ * 浮层组件实例类型
+ */
+export type PopoverRefType = {
+  visible: boolean
+  showPopover: () => void
+  hidePopover: () => void
+  popperInstance: React.MutableRefObject<Instance | undefined>
+  update: () => Promise<void>
+  realPlacement: PopoverPlacementType
+}

package/src/core/popover/style.module.less

@@ -0,0 +1,247 @@
+.kaitify-popover-refer {
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  color: @font-color;
+  font-size: @font-size;
+  line-height: @line-height;
+  font-family: @font-family;
+  box-sizing: border-box;
+
+  &.kaitify-dark {
+    color: @font-color-dark;
+  }
+}
+
+.kaitify-popover {
+  &,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    outline: none;
+  }
+
+  &[data-placement^='bottom'] {
+    padding-top: @small-padding;
+
+    &[data-arrow='true'] {
+      padding-top: calc(@small-padding + 6px);
+    }
+  }
+  &[data-placement^='top'] {
+    padding-bottom: @small-padding;
+
+    &[data-arrow='true'] {
+      padding-bottom: calc(@small-padding + 6px);
+    }
+  }
+  &[data-placement^='left'] {
+    padding-right: @small-padding;
+
+    &[data-arrow='true'] {
+      padding-right: calc(@small-padding + 6px);
+    }
+  }
+  &[data-placement^='right'] {
+    padding-left: @small-padding;
+
+    &[data-arrow='true'] {
+      padding-left: calc(@small-padding + 6px);
+    }
+  }
+
+  .kaitify-popover-wrapper {
+    position: relative;
+    background: @background-color;
+    border: 1px solid @border-color;
+    border-radius: @border-radius;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.06);
+  }
+
+  .kaitify-popover-content {
+    display: block;
+    color: @font-color;
+    font-size: @font-size;
+    font-family: @font-family;
+    line-height: @line-height;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .kaitify-popover-arrow {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+    border-width: 6px;
+
+    &::before {
+      position: absolute;
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+      border-width: 5px;
+      content: '';
+    }
+
+    &[data-placement^='bottom'] {
+      border-top: none;
+      border-bottom-color: @border-color;
+      bottom: 100%;
+
+      &::before {
+        border-top: none;
+        border-bottom-color: @background-color;
+        left: 1px;
+        top: 1.5px;
+        right: auto;
+        bottom: 0;
+        margin-left: -6px;
+      }
+    }
+
+    &[data-placement^='top'] {
+      border-bottom: none;
+      border-top-color: @border-color;
+      top: 100%;
+
+      &::before {
+        border-bottom: none;
+        border-top-color: @background-color;
+        left: 1px;
+        bottom: 1.5px;
+        top: auto;
+        right: auto;
+        margin-left: -6px;
+      }
+    }
+
+    &[data-placement='right'] {
+      border-left: none;
+      border-right-color: @border-color;
+      right: 100%;
+
+      &::before {
+        border-left: none;
+        border-right-color: @background-color;
+        left: 1.5px;
+        top: 1px;
+        right: auto;
+        bottom: auto;
+        margin-top: -6px;
+      }
+    }
+
+    &[data-placement='left'] {
+      border-right: none;
+      border-left-color: @border-color;
+      left: 100%;
+
+      &::before {
+        border-right: none;
+        border-left-color: @background-color;
+        right: 1.5px;
+        top: 1px;
+        bottom: auto;
+        left: auto;
+        margin-top: -6px;
+      }
+    }
+  }
+
+  &.kaitify-dark {
+    .kaitify-popover-wrapper {
+      background: @background-color-dark;
+      border-color: @border-color-dark;
+    }
+
+    .kaitify-popover-content {
+      color: @font-color-dark;
+    }
+
+    .kaitify-popover-arrow {
+      &[data-placement^='bottom'] {
+        border-bottom-color: @border-color-dark;
+
+        &::before {
+          border-bottom-color: @background-color-dark;
+        }
+      }
+
+      &[data-placement^='top'] {
+        border-top-color: @border-color-dark;
+
+        &::before {
+          border-top-color: @background-color-dark;
+        }
+      }
+
+      &[data-placement='right'] {
+        border-left: none;
+        border-right-color: @border-color-dark;
+        right: 100%;
+
+        &::before {
+          border-right-color: @background-color-dark;
+        }
+      }
+
+      &[data-placement='left'] {
+        border-left-color: @border-color-dark;
+
+        &::before {
+          border-left-color: @background-color-dark;
+        }
+      }
+    }
+  }
+}
+
+.kaitify-popover-translate-enter {
+  opacity: 0;
+  transform: translateY(20px);
+}
+.kaitify-popover-translate-exit {
+  opacity: 1;
+  transform: translateY(0px);
+}
+
+.kaitify-popover-translate-enter-active {
+  opacity: 1;
+  transform: translateY(0px);
+  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+}
+
+.kaitify-popover-translate-exit-active {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+}
+
+.kaitify-popover-fade-enter {
+  opacity: 0;
+  transform: translateY(20px);
+}
+.kaitify-popover-fade-exit {
+  opacity: 1;
+  transform: translateY(0px);
+}
+
+.kaitify-popover-fade-enter-active {
+  opacity: 1;
+  transform: translateY(0px);
+  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+}
+
+.kaitify-popover-fade-exit-active {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+}

package/src/core/tabs/index.ts

@@ -0,0 +1,3 @@
+import Tabs from './tabs'
+export * from './props'
+export { Tabs }

package/src/core/tabs/props.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react'
+
+/**
+ * 选项卡组件属性类型
+ */
+export type TabsPropsType = {
+  /**
+   * 选项卡分栏数据
+   */
+  data: { label: string; value: string | number }[]
+  /**
+   * 选项卡默认选项
+   */
+  defaultValue: string | number
+  /**
+   * 默认插槽
+   */
+  children: ReactNode | ((current: string | number) => ReactNode)
+}

package/src/core/tabs/style.module.less

@@ -0,0 +1,62 @@
+.kaitify-tabs {
+  display: block;
+  width: 100%;
+  position: relative;
+  font-size: @font-size;
+  color: @font-color;
+  line-height: @line-height;
+  font-family: @font-family;
+
+  &.kaitify-dark {
+    color: @font-color-dark;
+  }
+
+  &,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    outline: none;
+  }
+
+  .kaitify-tabs-header {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    padding: @small-padding 0;
+
+    .kaitify-tabs-header-item {
+      padding: @small-padding @padding;
+      position: relative;
+      transition: color 300ms;
+
+      &:hover {
+        cursor: pointer;
+        color: @theme;
+      }
+
+      &.kaitify-tabs-header-item-active {
+        color: @theme;
+
+        &::before {
+          position: absolute;
+          width: calc((100% - @small-padding * 2) * 2 / 3);
+          height: 2px;
+          left: 50%;
+          bottom: 0;
+          transform: translateX(-50%);
+          content: '';
+          background: @theme;
+          border-radius: 2px;
+        }
+      }
+    }
+  }
+
+  .kaitify-tabs-content {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+}