@gm-pc/tour 1.27.0 → 1.27.1-beta.0

package/src/components/svg_mask.tsx

@@ -1,168 +1,168 @@
-import React, { FC, MouseEvent } from 'react'
-import { safe } from '../utils'
-
-interface SvgMaskProps {
-  windowWidth: number
-  windowHeight: number
-  targetWidth: number
-  targetHeight: number
-  targetTop: number
-  targetLeft: number
-  padding: number
-  rounded: number
-  disableInteraction?: boolean
-  disableInteractionClassName?: string
-  className?: string
-  onClick?(event: MouseEvent<HTMLDivElement>): void
-}
-
-const SvgMask: FC<SvgMaskProps> = ({
-  windowWidth,
-  windowHeight,
-  targetWidth,
-  targetHeight,
-  targetTop,
-  targetLeft,
-  padding,
-  rounded,
-  disableInteraction,
-  disableInteractionClassName,
-  className,
-  onClick,
-}) => {
-  const width = safe(targetWidth + padding * 2)
-  const height = safe(targetHeight + padding * 2)
-  const top = safe(targetTop - padding)
-  const left = safe(targetLeft - padding)
-
-  return (
-    <div
-      onClick={onClick}
-      style={{
-        opacity: '0.7',
-        width: '100%',
-        left: 0,
-        top: 0,
-        height: '100%',
-        position: 'fixed',
-        zIndex: 99999,
-        pointerEvents: 'none',
-        color: '#000',
-      }}
-    >
-      <svg
-        width={windowWidth}
-        height={windowHeight}
-        xmlns='http://www.w3.org/2000/svg'
-        className={className}
-      >
-        <defs>
-          <mask id='mask-main'>
-            <rect x={0} y={0} width={windowWidth} height={windowHeight} fill='white' />
-            <rect x={left} y={top} width={width} height={height} fill='black' />
-            {/* top left rounded corner */}
-            <rect
-              x={left - 1}
-              y={top - 1}
-              width={rounded}
-              height={rounded}
-              fill='white'
-            />
-            <circle cx={left + rounded} cy={top + rounded} r={rounded} fill='black' />
-            {/* top right rounded corner */}
-            <rect
-              x={left + width - rounded + 1}
-              y={top - 1}
-              width={rounded}
-              height={rounded}
-              fill='white'
-            />
-            <circle
-              cx={left + width - rounded}
-              cy={top + rounded}
-              r={rounded}
-              fill='black'
-            />
-            {/* bottom left rounded corner */}
-            <rect
-              x={left - 1}
-              y={top + height - rounded + 1}
-              width={rounded}
-              height={rounded}
-              fill='white'
-            />
-            <circle
-              cx={left + rounded}
-              cy={top + height - rounded}
-              r={rounded}
-              fill='black'
-            />
-            {/* bottom right rounded corner */}
-            <rect
-              x={left + width - rounded + 1}
-              y={top + height - rounded + 1}
-              width={rounded}
-              height={rounded}
-              fill='white'
-            />
-            <circle
-              cx={left + width - rounded}
-              cy={top + height - rounded}
-              r={rounded}
-              fill='black '
-            />
-          </mask>
-          <clipPath id='clip-path'>
-            {/* top */}
-            <rect x={0} y={0} width={windowWidth} height={top} />
-            {/* left */}
-            <rect x={0} y={top} width={left} height={height} />
-            {/* right */}
-            <rect
-              x={targetLeft + targetWidth + padding}
-              y={top}
-              width={safe(windowWidth - targetWidth - left)}
-              height={height}
-            />
-            {/* bottom */}
-            <rect
-              x={0}
-              y={targetTop + targetHeight + padding}
-              width={windowWidth}
-              height={safe(windowHeight - targetHeight - top)}
-            />
-          </clipPath>
-        </defs>
-        <rect
-          x={0}
-          y={0}
-          width={windowWidth}
-          height={windowHeight}
-          fill='currentColor'
-          mask='url(#mask-main)'
-        />
-        <rect
-          x={0}
-          y={0}
-          width={windowWidth}
-          height={windowHeight}
-          fill='currentColor'
-          clipPath='url(#clip-path)'
-          pointerEvents='auto'
-        />
-        <rect
-          x={left}
-          y={top}
-          width={width}
-          height={height}
-          pointerEvents='auto'
-          fill='transparent'
-          display={disableInteraction ? 'block' : 'none'}
-          className={disableInteractionClassName}
-        />
-      </svg>
-    </div>
-  )
-}
-
-export default SvgMask
+import React, { FC, MouseEvent } from 'react'
+import { safe } from '../utils'
+
+interface SvgMaskProps {
+  windowWidth: number
+  windowHeight: number
+  targetWidth: number
+  targetHeight: number
+  targetTop: number
+  targetLeft: number
+  padding: number
+  rounded: number
+  disableInteraction?: boolean
+  disableInteractionClassName?: string
+  className?: string
+  onClick?(event: MouseEvent<HTMLDivElement>): void
+}
+
+const SvgMask: FC<SvgMaskProps> = ({
+  windowWidth,
+  windowHeight,
+  targetWidth,
+  targetHeight,
+  targetTop,
+  targetLeft,
+  padding,
+  rounded,
+  disableInteraction,
+  disableInteractionClassName,
+  className,
+  onClick,
+}) => {
+  const width = safe(targetWidth + padding * 2)
+  const height = safe(targetHeight + padding * 2)
+  const top = safe(targetTop - padding)
+  const left = safe(targetLeft - padding)
+
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        opacity: '0.7',
+        width: '100%',
+        left: 0,
+        top: 0,
+        height: '100%',
+        position: 'fixed',
+        zIndex: 99999,
+        pointerEvents: 'none',
+        color: '#000',
+      }}
+    >
+      <svg
+        width={windowWidth}
+        height={windowHeight}
+        xmlns='http://www.w3.org/2000/svg'
+        className={className}
+      >
+        <defs>
+          <mask id='mask-main'>
+            <rect x={0} y={0} width={windowWidth} height={windowHeight} fill='white' />
+            <rect x={left} y={top} width={width} height={height} fill='black' />
+            {/* top left rounded corner */}
+            <rect
+              x={left - 1}
+              y={top - 1}
+              width={rounded}
+              height={rounded}
+              fill='white'
+            />
+            <circle cx={left + rounded} cy={top + rounded} r={rounded} fill='black' />
+            {/* top right rounded corner */}
+            <rect
+              x={left + width - rounded + 1}
+              y={top - 1}
+              width={rounded}
+              height={rounded}
+              fill='white'
+            />
+            <circle
+              cx={left + width - rounded}
+              cy={top + rounded}
+              r={rounded}
+              fill='black'
+            />
+            {/* bottom left rounded corner */}
+            <rect
+              x={left - 1}
+              y={top + height - rounded + 1}
+              width={rounded}
+              height={rounded}
+              fill='white'
+            />
+            <circle
+              cx={left + rounded}
+              cy={top + height - rounded}
+              r={rounded}
+              fill='black'
+            />
+            {/* bottom right rounded corner */}
+            <rect
+              x={left + width - rounded + 1}
+              y={top + height - rounded + 1}
+              width={rounded}
+              height={rounded}
+              fill='white'
+            />
+            <circle
+              cx={left + width - rounded}
+              cy={top + height - rounded}
+              r={rounded}
+              fill='black '
+            />
+          </mask>
+          <clipPath id='clip-path'>
+            {/* top */}
+            <rect x={0} y={0} width={windowWidth} height={top} />
+            {/* left */}
+            <rect x={0} y={top} width={left} height={height} />
+            {/* right */}
+            <rect
+              x={targetLeft + targetWidth + padding}
+              y={top}
+              width={safe(windowWidth - targetWidth - left)}
+              height={height}
+            />
+            {/* bottom */}
+            <rect
+              x={0}
+              y={targetTop + targetHeight + padding}
+              width={windowWidth}
+              height={safe(windowHeight - targetHeight - top)}
+            />
+          </clipPath>
+        </defs>
+        <rect
+          x={0}
+          y={0}
+          width={windowWidth}
+          height={windowHeight}
+          fill='currentColor'
+          mask='url(#mask-main)'
+        />
+        <rect
+          x={0}
+          y={0}
+          width={windowWidth}
+          height={windowHeight}
+          fill='currentColor'
+          clipPath='url(#clip-path)'
+          pointerEvents='auto'
+        />
+        <rect
+          x={left}
+          y={top}
+          width={width}
+          height={height}
+          pointerEvents='auto'
+          fill='transparent'
+          display={disableInteraction ? 'block' : 'none'}
+          className={disableInteractionClassName}
+        />
+      </svg>
+    </div>
+  )
+}
+
+export default SvgMask

package/src/hook.ts

@@ -1,19 +1,19 @@
-import { MutableRefObject, useEffect } from 'react'
-
-function useMutationObserver(
-  ref: MutableRefObject<HTMLDivElement | undefined>,
-  callback: MutationCallback,
-  options = { attributes: true, characterData: true, subtree: true, childList: true }
-) {
-  useEffect((): void | (() => void) => {
-    if (ref.current) {
-      const observer = new window.MutationObserver(callback)
-      observer.observe(ref.current, options)
-      return () => {
-        observer.disconnect()
-      }
-    }
-  }, [ref, callback, options])
-}
-
-export { useMutationObserver }
+import { MutableRefObject, useEffect } from 'react'
+
+function useMutationObserver(
+  ref: MutableRefObject<HTMLDivElement | undefined>,
+  callback: MutationCallback,
+  options = { attributes: true, characterData: true, subtree: true, childList: true }
+) {
+  useEffect((): void | (() => void) => {
+    if (ref.current) {
+      const observer = new window.MutationObserver(callback)
+      observer.observe(ref.current, options)
+      return () => {
+        observer.disconnect()
+      }
+    }
+  }, [ref, callback, options])
+}
+
+export { useMutationObserver }

package/src/index.ts

@@ -1,2 +1,2 @@
-export { default as Tour } from './tour'
-export type { TourProps, TourStepItem } from './types'
+export { default as Tour } from './tour'
+export type { TourProps, TourStepItem } from './types'

package/src/reducer.ts

@@ -1,55 +1,55 @@
-interface ReducerState {
-  top: number
-  right: number
-  bottom: number
-  left: number
-  width: number
-  height: number
-  w: number
-  h: number
-  helperWidth?: number
-  helperHeight?: number
-  helperPosition?: 'top' | 'right' | 'bottom' | 'left' | 'center'
-  inDOM?: boolean
-}
-
-interface ReducerAction extends Partial<ReducerState> {
-  type: 'HAS_DOM_NODE' | 'NO_DOM_NODE'
-}
-
-export const initialState: ReducerState = {
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  width: 0,
-  height: 0,
-  w: 0,
-  h: 0,
-}
-
-export default function (state: ReducerState, action: ReducerAction): ReducerState {
-  switch (action.type) {
-    case 'HAS_DOM_NODE':
-      // @ts-ignore
-      delete action.type
-      return { ...state, ...action }
-    case 'NO_DOM_NODE':
-      return {
-        ...state,
-        top: state.h + 10,
-        right: state.w / 2 + 9,
-        bottom: state.h / 2 + 9,
-        left: action.w! / 2 - (state.helperWidth ? state.helperWidth / 2 : 0),
-        width: 0,
-        height: 0,
-        w: action.w!,
-        h: action.h!,
-        helperPosition: 'center',
-      }
-    default:
-      return state
-  }
-}
-
-export type { ReducerAction, ReducerState }
+interface ReducerState {
+  top: number
+  right: number
+  bottom: number
+  left: number
+  width: number
+  height: number
+  w: number
+  h: number
+  helperWidth?: number
+  helperHeight?: number
+  helperPosition?: 'top' | 'right' | 'bottom' | 'left' | 'center'
+  inDOM?: boolean
+}
+
+interface ReducerAction extends Partial<ReducerState> {
+  type: 'HAS_DOM_NODE' | 'NO_DOM_NODE'
+}
+
+export const initialState: ReducerState = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  width: 0,
+  height: 0,
+  w: 0,
+  h: 0,
+}
+
+export default function (state: ReducerState, action: ReducerAction): ReducerState {
+  switch (action.type) {
+    case 'HAS_DOM_NODE':
+      // @ts-ignore
+      delete action.type
+      return { ...state, ...action }
+    case 'NO_DOM_NODE':
+      return {
+        ...state,
+        top: state.h + 10,
+        right: state.w / 2 + 9,
+        bottom: state.h / 2 + 9,
+        left: action.w! / 2 - (state.helperWidth ? state.helperWidth / 2 : 0),
+        width: 0,
+        height: 0,
+        w: action.w!,
+        h: action.h!,
+        helperPosition: 'center',
+      }
+    default:
+      return state
+  }
+}
+
+export type { ReducerAction, ReducerState }