fix: float style

release

packages/istanbul-widget/CHANGELOG.md

@@ -1,5 +1,11 @@
 # istanbul-widget
 
+## 1.1.1
+
+### Patch Changes
+
+- fix: float btn style
+
 ## 1.1.0
 
 ### Minor Changes

packages/istanbul-widget/dev.ts

@@ -2,13 +2,13 @@ import IstanbulWidget from './src/istanbul-widget'
 
 new IstanbulWidget({
   defaultPosition: {
-    x: 20,
+    x: 0,
     y: 100,
   },
   report: {
     auto: false,
-    onAction: async (coverage) => {
-      console.log('上报', coverage)
+    onAction: async (coverage, config) => {
+      console.log('上报', coverage, config)
       throw new Error('上报失败')
     },
     requireReporter: false,

packages/istanbul-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "istanbul-widget",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "main": "./dist/istanbul-widget.min.js",
   "module": "./dist/istanbul-widget.esm.js",
@@ -33,7 +33,6 @@
     "destr": "^2.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6",
     "tailwind-merge": "^2.2.2",
     "tailwind-variants": "^0.2.1",
     "tailwindcss-animate": "^1.0.7"

packages/istanbul-widget/src/components/ui/toast.tsx

@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "iw-fixed iw-top-0 iw-z-[100] iw-flex iw-max-h-screen iw-w-full iw-flex-col-reverse iw-px-4 sm:iw-bottom-0 sm:iw-right-0 sm:iw-top-auto sm:iw-flex-col md:iw-max-w-[420px]",
+      "iw-fixed iw-top-3 iw-z-[100] iw-flex iw-max-h-screen iw-w-full iw-flex-col-reverse iw-px-4 sm:iw-bottom-3 sm:iw-right-0 sm:iw-top-auto sm:iw-flex-col md:iw-max-w-[420px]",
       className
     )}
     {...props}

packages/istanbul-widget/src/core/IstanbulWidget.tsx

@@ -1,5 +1,5 @@
 import { toNumber } from '@minko-fe/lodash-pro'
-import { useDebounceFn, useSetState, useUpdateEffect } from '@minko-fe/react-hook'
+import { useDebounceFn, useMemoizedFn, useSetState, useUpdateEffect } from '@minko-fe/react-hook'
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import {
   AlertDialog,
@@ -63,14 +63,15 @@ export default function IstanbulWidget(props: IstanbulWidgetProps) {
 
   const { toast } = useToast()
   const [dialogOpen, setDialogOpen] = useState(false)
+  const [popoverOpen, setPopoverOpen] = useState(false)
 
   // 静态表单值
   const staticConfig = useRef<Config>(config)
 
   // 动态表单值
   const [dynamicConfig, setDynamicConfig] = useSetState<Config>(config)
 
-  const onSubmit = (data: Config) => {
+  const onSubmit = useMemoizedFn((data: Config) => {
     const { enable_auto_report, report_interval, reporter } = data
     if (requireReporter && !reporter) {
       return toast({
@@ -91,30 +92,37 @@ export default function IstanbulWidget(props: IstanbulWidgetProps) {
     toast({
       description: '设置保存成功',
     })
-  }
+  })
 
   const { run: debouncedReport, flush: report } = useDebounceFn(
-    async (showToast = true) => {
+    async (showToast: boolean = true) => {
       // before report
-      await beforeAction?.()
+      await beforeAction?.(window.__coverage__, staticConfig.current)
       try {
         if (requireReporter && !staticConfig.current.reporter) {
           console.warn('[istanbul-widget]: 请填写上报人')
+          showToast &&
+            toast({
+              description: '请在设置中填写上报人',
+              variant: 'destructive',
+            })
+          return
         }
-        await onAction(window.__coverage__)
+        await onAction(window.__coverage__, staticConfig.current)
         showToast &&
           toast({
             description: '上报成功',
           })
       } catch (e) {
-        toast({
-          description: '上报失败，请打开控制台查看原因',
-          variant: 'destructive',
-        })
+        showToast &&
+          toast({
+            description: '上报失败，请打开控制台查看原因',
+            variant: 'destructive',
+          })
         console.error('[istanbul-widget]: report error', e)
       } finally {
         // after report
-        await afterAction?.()
+        await afterAction?.(window.__coverage__, staticConfig.current)
       }
     },
     {
@@ -167,13 +175,19 @@ export default function IstanbulWidget(props: IstanbulWidgetProps) {
     }
   }, [])
 
+  let dialogOpenTimer: number
   useUpdateEffect(() => {
     if (!dialogOpen) {
-      const timer = setTimeout(() => {
+      dialogOpenTimer = window.setTimeout(() => {
         setDynamicConfig(staticConfig.current)
-        clearTimeout(timer)
+        clearTimeout(dialogOpenTimer)
         // animation end
       }, 150)
+    } else {
+      dialogOpenTimer && clearTimeout(dialogOpenTimer)
+    }
+    return () => {
+      dialogOpenTimer && clearTimeout(dialogOpenTimer)
     }
   }, [dialogOpen])
 
@@ -202,49 +216,52 @@ export default function IstanbulWidget(props: IstanbulWidgetProps) {
           'iw-fixed iw-z-[49] iw-right-0 iw-top-0 iw-left-0 iw-bottom-0 iw-pointer-events-none',
         )}
       >
-        <Dialog open={dialogOpen} onOpenChange={(open) => setDialogOpen(open)}>
-          <Popover>
-            <div>
-              <Draggable
-                position={position}
-                defaultPosition={defaultPosition}
-                dragOptions={{
-                  onDrag() {
-                    dragging.current = true
-                  },
-                  onDragEnd() {
-                    const t = setTimeout(() => {
-                      dragging.current = false
-                      clearTimeout(t)
-                    }, 60)
-                  },
+        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
+            <Draggable
+              position={position}
+              defaultPosition={defaultPosition}
+              dragOptions={{
+                onDragStart() {
+                  setPopoverOpen(false)
+                },
+                onDrag() {
+                  dragging.current = true
+                },
+                onDragEnd() {
+                  const t = setTimeout(() => {
+                    dragging.current = false
+                    clearTimeout(t)
+                  }, 60)
+                },
+              }}
+              float={float}
+            >
+              <PopoverTrigger
+                asChild
+                onClick={(e) => {
+                  if (dragging.current) {
+                    e.preventDefault()
+                    return
+                  }
                 }}
-                float={float}
               >
-                <PopoverTrigger
-                  asChild
-                  onClick={(e) => {
-                    if (dragging.current) {
-                      e.preventDefault()
-                      return
-                    }
-                  }}
-                >
+                <div className='iw-rounded-full iw-overflow-hidden'>
                   <div
-                    className='iw-rounded-full iw-w-9 iw-h-9 iw-flex iw-justify-center iw-items-center iw-p-2'
+                    className='iw-w-9 iw-h-9 iw-flex iw-justify-center iw-items-center iw-p-2'
                     style={{
                       backgroundColor: 'rgba(0, 0, 0, 0.3)',
                     }}
                   >
                     <div className='iw-icon-[vscode-icons--file-type-testjs] iw-w-full iw-h-full iw-cursor-pointer'></div>
                   </div>
-                </PopoverTrigger>
-              </Draggable>
-            </div>
+                </div>
+              </PopoverTrigger>
+            </Draggable>
             <PopoverContent sideOffset={2}>
               <div className='iw-flex iw-items-center iw-space-x-2 iw-rounded-md iw-p-2 iw-text-xs iw-shadow'>
                 <PopoverClose asChild>
-                  <Button size='sm' onClick={debouncedReport} data-state='closed'>
+                  <Button size='sm' onClick={() => debouncedReport()}>
                     上报
                   </Button>
                 </PopoverClose>

packages/istanbul-widget/src/core/components/Draggable.tsx

@@ -1,4 +1,4 @@
-import { useUpdateEffect } from '@minko-fe/react-hook'
+import { useMemoizedFn, useUpdateEffect } from '@minko-fe/react-hook'
 import { type DragOptions, useDraggable } from '@neodrag/react'
 import { type PropsWithChildren, memo, useEffect, useRef, useState } from 'react'
 import { cn } from '@/components/utils'
@@ -12,6 +12,15 @@ type DraggableProps = PropsWithChildren<{
   float: IstanbulWidgetOptions['float']
 }>
 
+const IOS_SAFE_AREA = 20
+
+const bounds = {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: IOS_SAFE_AREA,
+}
+
 function Draggable(props: DraggableProps) {
   const { children, position: positionProp, defaultPosition, dragOptions, float } = props
 
@@ -41,27 +50,34 @@ function Draggable(props: DraggableProps) {
     onDragEnd(data) {
       setDragging(false)
 
-      if (float) {
-        float.offset ??= 0
-        const { offsetX, offsetY } = data
-        const windowWidth = window.innerWidth
-        const w = handleRef.current!.getBoundingClientRect().width
-        const newPosition = offsetX + w / 2 > windowWidth / 2 ? windowWidth - w - float.offset : float.offset
-        setPosition({ x: newPosition, y: offsetY })
-      }
+      const { offsetX, offsetY } = data
+      setPosition(fixFloatPosition({ x: offsetX, y: offsetY }))
 
       dragOptions.onDragEnd?.(data)
     },
     axis: 'both',
-    bounds: {
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 20,
+    bounds,
+    recomputeBounds: {
+      dragStart: true,
+      drag: false,
+      dragEnd: true,
     },
   })
 
-  const getButtonSafeAreaXY = (x: number, y: number) => {
+  const fixFloatPosition = useMemoizedFn((position: Position) => {
+    if (float) {
+      float.offsetX ??= 0
+      const { x, y } = position
+      const windowWidth = window.innerWidth
+      const w = handleRef.current!.getBoundingClientRect().width
+      const newX = x + w / 2 > windowWidth / 2 ? windowWidth - w - float.offsetX : float.offsetX
+      const newY = y <= bounds.top ? bounds.top : y
+      return { x: newX, y: newY }
+    }
+    return position
+  })
+
+  const getButtonSafeAreaXY = useMemoizedFn((x: number, y: number) => {
     const docWidth = Math.max(document.documentElement.offsetWidth, window.innerWidth)
     const docHeight = Math.max(document.documentElement.offsetHeight, window.innerHeight)
 
@@ -79,20 +95,20 @@ function Draggable(props: DraggableProps) {
     }
 
     if (y >= docHeight - btn.offsetHeight) {
-      y = docHeight - btn.offsetHeight - 20
+      y = docHeight - btn.offsetHeight - IOS_SAFE_AREA
     }
 
     if (y < 0) {
       y = defaultPosition.y
     }
 
     return [x, y]
-  }
+  })
 
   useEffect(() => {
     if (draggableRef.current) {
       const [x, y] = getButtonSafeAreaXY(position.x, position.y)
-      setPosition({ x, y })
+      setPosition(fixFloatPosition({ x, y }))
     }
   }, [draggableRef.current])
 

packages/istanbul-widget/src/core/core.ts

@@ -22,7 +22,7 @@ export class IstanbulWidget {
     theme: 'dark',
     target: document.body,
     float: {
-      offset: 8,
+      offsetX: 8,
     },
     defaultPosition: {
       x: 0,

packages/istanbul-widget/src/core/options.interface.ts

@@ -13,7 +13,7 @@ export interface IstanbulWidgetOptions {
    * 按钮悬浮
    */
   float?: {
-    offset?: number
+    offsetX?: number
   }
   /**
    * 按钮默认位置
@@ -37,15 +37,15 @@ export interface IstanbulWidgetOptions {
     /**
      * 上报前触发
      */
-    beforeAction?: () => Promise<void> | void
+    beforeAction?: (coverage: any, config: Config) => Promise<void> | void
     /**
      * 上报方法
      */
-    onAction: (coverage: any) => Promise<void> | void
+    onAction: (coverage: any, config: Config) => Promise<void> | void
     /**
      * 上报后触发
      */
-    afterAction?: () => Promise<void> | void
+    afterAction?: (coverage: any, config: Config) => Promise<void> | void
     /**
      * 自动上报
      */

packages/vite-plugin-istanbul-widget/CHANGELOG.md

@@ -1,5 +1,12 @@
 # vite-plugin-istanbul-widget
 
+## 1.0.5
+
+### Patch Changes
+
+- Updated dependencies
+  - istanbul-widget@1.1.1
+
 ## 1.0.4
 
 ### Patch Changes

packages/vite-plugin-istanbul-widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-istanbul-widget",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",