From 14754ea74ae389b00e0c4a3e7c7bc8308fcd9a68 Mon Sep 17 00:00:00 2001 From: hemengke <23536175@qq.com> Date: Thu, 18 Apr 2024 16:15:03 +0800 Subject: [PATCH] fix: float style release --- packages/istanbul-widget/CHANGELOG.md | 6 + packages/istanbul-widget/dev.ts | 6 +- packages/istanbul-widget/package.json | 3 +- .../src/components/ui/toast.tsx | 2 +- .../src/core/IstanbulWidget.tsx | 105 ++++++++++-------- .../src/core/components/Draggable.tsx | 52 ++++++--- packages/istanbul-widget/src/core/core.ts | 2 +- .../src/core/options.interface.ts | 8 +- .../vite-plugin-istanbul-widget/CHANGELOG.md | 7 ++ .../vite-plugin-istanbul-widget/package.json | 2 +- pnpm-lock.yaml | 22 +--- 11 files changed, 121 insertions(+), 94 deletions(-) diff --git a/packages/istanbul-widget/CHANGELOG.md b/packages/istanbul-widget/CHANGELOG.md index b5d1fef..3b572d3 100644 --- a/packages/istanbul-widget/CHANGELOG.md +++ b/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 diff --git a/packages/istanbul-widget/dev.ts b/packages/istanbul-widget/dev.ts index b6d079b..cb16b10 100644 --- a/packages/istanbul-widget/dev.ts +++ b/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, diff --git a/packages/istanbul-widget/package.json b/packages/istanbul-widget/package.json index f822ba5..6851fc0 100644 --- a/packages/istanbul-widget/package.json +++ b/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" diff --git a/packages/istanbul-widget/src/components/ui/toast.tsx b/packages/istanbul-widget/src/components/ui/toast.tsx index 4027bdc..66a933c 100644 --- a/packages/istanbul-widget/src/components/ui/toast.tsx +++ b/packages/istanbul-widget/src/components/ui/toast.tsx @@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef< (config) @@ -70,7 +71,7 @@ export default function IstanbulWidget(props: IstanbulWidgetProps) { // 动态表单值 const [dynamicConfig, setDynamicConfig] = useSetState(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', )} > - setDialogOpen(open)}> - -
- { - dragging.current = false - clearTimeout(t) - }, 60) - }, + + + { + dragging.current = false + clearTimeout(t) + }, 60) + }, + }} + float={float} + > + { + if (dragging.current) { + e.preventDefault() + return + } }} - float={float} > - { - if (dragging.current) { - e.preventDefault() - return - } - }} - > +
- - -
+
+ +
- diff --git a/packages/istanbul-widget/src/core/components/Draggable.tsx b/packages/istanbul-widget/src/core/components/Draggable.tsx index 513e33a..57f64e6 100644 --- a/packages/istanbul-widget/src/core/components/Draggable.tsx +++ b/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,7 +95,7 @@ function Draggable(props: DraggableProps) { } if (y >= docHeight - btn.offsetHeight) { - y = docHeight - btn.offsetHeight - 20 + y = docHeight - btn.offsetHeight - IOS_SAFE_AREA } if (y < 0) { @@ -87,12 +103,12 @@ function Draggable(props: DraggableProps) { } return [x, y] - } + }) useEffect(() => { if (draggableRef.current) { const [x, y] = getButtonSafeAreaXY(position.x, position.y) - setPosition({ x, y }) + setPosition(fixFloatPosition({ x, y })) } }, [draggableRef.current]) diff --git a/packages/istanbul-widget/src/core/core.ts b/packages/istanbul-widget/src/core/core.ts index cc92212..3582ae7 100644 --- a/packages/istanbul-widget/src/core/core.ts +++ b/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, diff --git a/packages/istanbul-widget/src/core/options.interface.ts b/packages/istanbul-widget/src/core/options.interface.ts index 7ae2dc4..270ff8c 100644 --- a/packages/istanbul-widget/src/core/options.interface.ts +++ b/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 + beforeAction?: (coverage: any, config: Config) => Promise | void /** * 上报方法 */ - onAction: (coverage: any) => Promise | void + onAction: (coverage: any, config: Config) => Promise | void /** * 上报后触发 */ - afterAction?: () => Promise | void + afterAction?: (coverage: any, config: Config) => Promise | void /** * 自动上报 */ diff --git a/packages/vite-plugin-istanbul-widget/CHANGELOG.md b/packages/vite-plugin-istanbul-widget/CHANGELOG.md index c38c857..13d59a1 100644 --- a/packages/vite-plugin-istanbul-widget/CHANGELOG.md +++ b/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 diff --git a/packages/vite-plugin-istanbul-widget/package.json b/packages/vite-plugin-istanbul-widget/package.json index 3636e0c..df24f70 100644 --- a/packages/vite-plugin-istanbul-widget/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c241c7b..b6f9535 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -171,9 +171,6 @@ importers: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) - react-draggable: - specifier: ^4.4.6 - version: 4.4.6(react-dom@18.2.0)(react@18.2.0) tailwind-merge: specifier: ^2.2.2 version: 2.2.2 @@ -5191,11 +5188,6 @@ packages: engines: {node: '>=0.8'} dev: true - /clsx@1.2.1: - resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} - engines: {node: '>=6'} - dev: false - /clsx@2.0.0: resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==} engines: {node: '>=6'} @@ -9730,6 +9722,7 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 react-is: 16.13.1 + dev: true /proxy-addr@2.0.7: resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==} @@ -9816,24 +9809,13 @@ packages: scheduler: 0.23.0 dev: false - /react-draggable@4.4.6(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==} - peerDependencies: - react: '>= 16.3.0' - react-dom: '>= 16.3.0' - dependencies: - clsx: 1.2.1 - prop-types: 15.8.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - /react-fast-compare@3.2.2: resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==} dev: false /react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + dev: true /react-refresh@0.14.0: resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}