fix Preview component working wrong

Author: SyMind

packages/nextjs/components/src/preview/index.tsx

@@ -1,6 +1,7 @@
 import React, {useState} from 'react'
 import Mask from '../mask'
-import {Swiper, SwiperItem} from '../swiper'
+import Swiper from '../swiper'
+import SwiperItem from '../swiper-item'
 
 interface PreviewProps {
     /**

packages/nextjs/components/src/swiper-item/index.tsx

@@ -15,7 +15,7 @@ export interface SwiperItemProps extends TaroBaseProps {
     children?: React.ReactNode
 }
 
-const SwiperItem = ({className, itemId, children, ...rest}) => {
+const SwiperItem: React.FC<SwiperItemProps> = ({className, itemId, children, ...rest}) => {
     const props = useTaroBaseEvents(rest)
 
     return (

packages/nextjs/taro/src/basics/system.ts

@@ -144,7 +144,6 @@ const getSystemInfoSyncInternal = () => {
     const deviceInfo = getDeviceInfo()
     const appBaseInfo = getAppBaseInfoInternal()
     const appAuthorizeSetting = getAppAuthorizeSetting()
-    delete deviceInfo.abi
 
     return {
         ...windowInfo,

packages/nextjs/taro/src/canvas/canvasGetImageData.ts

@@ -29,8 +29,16 @@ const canvasGetImageDataInternal: typeof swan.canvasGetImageData = ({
         return
     }
 
+    const ctx = canvas.getContext('2d')
+    if (!ctx) {
+        fail?.({
+            errMsg: 'Your browser does not support canvas api.'
+        })
+        complete?.()
+        return
+    }
+
     try {
-        const ctx = canvas.getContext('2d')
         const imageData = ctx.getImageData(x, y, width, height)
         success?.({
             width,

packages/nextjs/taro/src/canvas/canvasPutImageData.ts

@@ -30,8 +30,16 @@ const canvasPutImageDataInternal: typeof swan.canvasPutImageData = ({
         return
     }
 
+    const ctx = canvas.getContext('2d')
+    if (!ctx) {
+        fail?.({
+            errMsg: 'Your browser does not support canvas api.'
+        })
+        complete?.()
+        return
+    }
+
     try {
-        const ctx = canvas.getContext('2d')
         const imageData = new ImageData(data, width, height)
         ctx.putImageData(imageData, x, y)
         success?.()

packages/nextjs/taro/src/canvas/createCanvasContext.ts

@@ -5,13 +5,13 @@ import { CanvasContext } from './CanvasContext'
  * 创建 canvas 的绘图上下文 CanvasContext 对象
  */
 export const createCanvasContext = (canvasId, inst) => {
-  const el = findDOM(inst) as HTMLElement
-  const canvas = el?.querySelector(`canvas[canvas-id="${canvasId}"]`) as HTMLCanvasElement
-  const ctx = canvas?.getContext('2d') as CanvasRenderingContext2D
-  const context = new CanvasContext(canvas, ctx)
-  if (!ctx) return context
-  context.canvas = canvas
-  context.ctx = ctx
+    const el = findDOM(inst) as HTMLElement
+    const canvas = el?.querySelector(`canvas[canvas-id="${canvasId}"]`) as HTMLCanvasElement
+    const ctx = canvas?.getContext('2d') as CanvasRenderingContext2D
+    const context = new CanvasContext(canvas, ctx)
+    if (!ctx) return context
+    context.canvas = canvas
+    context.ctx = ctx
 
-  return context
+    return context
 }

packages/nextjs/taro/src/dataCache.ts

@@ -110,7 +110,9 @@ const getStorageInfoSyncInternal: typeof swan.getStorageInfoSync = () => {
     for (const key in localStorage){
         keys.push(key)
         const value = localStorage.getItem(key)
-        currentSize += key.length + value.length
+        if (value != null) {
+            currentSize += key.length + value.length
+        }
     }
     return {
         keys,

packages/nextjs/taro/src/media/image.tsx

@@ -117,10 +117,10 @@ function previewImageInternal({
     }
 
     if (!urls) {
-        fail({
+        fail?.({
             errMsg: 'The urls param is required.'
         })
-        complete()
+        complete?.()
         return
     }
 
@@ -131,13 +131,13 @@ function previewImageInternal({
             defaultCurrent={current}
             urls={urls}
             onClose={() => {
-                ReactDOM.unmountComponentAtNode(previewContainer)
+                ReactDOM.unmountComponentAtNode(previewContainer!)
                 previewContainer = null
             }}
         />,
         previewContainer
     )
-    success({})
+    success?.({})
 }
 
 /**

packages/nextjs/taro/src/network/upload.ts

@@ -68,7 +68,9 @@ export const uploadFile: typeof swan.uploadFile = ({
 
     xhr.onload = () => {
         const status = xhr.status
-        clearTimeout(timeoutTimer)
+        if (timeoutTimer) {
+            clearTimeout(timeoutTimer)
+        }
         success?.({
             statusCode: status,
             data: xhr.responseText || xhr.response
@@ -77,15 +79,19 @@ export const uploadFile: typeof swan.uploadFile = ({
     }
 
     xhr.onabort = () => {
-        clearTimeout(timeoutTimer)
+        if (timeoutTimer) {
+            clearTimeout(timeoutTimer)
+        }
         fail?.({
             errMsg: 'uploadFile:fail abort'
         })
         complete?.()
     }
 
     xhr.onerror = (e: ProgressEvent<EventTarget> & { message?: string }) => {
-        clearTimeout(timeoutTimer)
+        if (timeoutTimer) {
+            clearTimeout(timeoutTimer)
+        }
         fail?.({
             errMsg: `uploadFile:fail ${e.message}`
         })
@@ -96,7 +102,9 @@ export const uploadFile: typeof swan.uploadFile = ({
      * 中断任务
      */
     const abort = () => {
-        clearTimeout(timeoutTimer)
+        if (timeoutTimer) {
+            clearTimeout(timeoutTimer)
+        }
         xhr.abort()
     }
 

packages/nextjs/taro/src/ui/background.ts

@@ -2,7 +2,7 @@ import promisify from 'mpromisify'
 import {unsupported, limited} from '../_util'
 import * as swan from '../swan'
 
-const setBackgroundColorInternal: typeof swan.setBackgroundColor = ({backgroundColor, success, complete}) => {
+const setBackgroundColorInternal: typeof swan.setBackgroundColor = ({backgroundColor = '', success, complete}) => {
     document.documentElement.style.backgroundColor = backgroundColor
     success?.()
     complete?.()

packages/nextjs/taro/src/ui/interactive.tsx

@@ -34,7 +34,7 @@ class Portals<T> {
 
     component?: React.ComponentType<T>
 
-    container?: HTMLDivElement
+    container: HTMLDivElement
 
     timer?: ReturnType<typeof setTimeout>
 
@@ -102,7 +102,7 @@ export const registerToastComponent = toastComponent => {
 
 const showToastInternal: typeof swan.showToast = ({title, icon, duration = 1500, success, fail, complete}) => {
     try {
-        globalToast.new(
+        globalToast?.new(
             {
                 icon: icon === 'none' ? undefined : icon,
                 children: title,
@@ -127,7 +127,7 @@ const showToastInternal: typeof swan.showToast = ({title, icon, duration = 1500,
 export const showToast = promisify(limited.async('showToast', showToastInternal))
 
 const hideToastInternal: typeof swan.hideToast = ({success, complete}) => {
-    globalToast.destroy(() => {
+    globalToast?.destroy(() => {
         success?.()
         complete?.()
     })
@@ -139,7 +139,7 @@ const hideToastInternal: typeof swan.hideToast = ({success, complete}) => {
 export const hideToast = promisify(limited.async('hideToast', hideToastInternal))
 
 const showLoadingInternal: typeof swan.showLoading = ({title = '正在加载...', success, complete}) => {
-    globalToast.new(
+    globalToast?.new(
         {
             icon: 'loading',
             children: title
@@ -157,7 +157,7 @@ const showLoadingInternal: typeof swan.showLoading = ({title = '正在加载...'
 export const showLoading = promisify(limited.async('showLoading', showLoadingInternal))
 
 const hideLoadingInternal: typeof swan.hideLoading = ({success, complete}) => {
-    globalToast.destroy(() => {
+    globalToast?.destroy(() => {
         success?.()
         complete?.()
     })
@@ -246,7 +246,7 @@ const showModalInternal: typeof swan.showModal = ({
     success,
     complete
 }) => {
-    globalModal.new({
+    globalModal?.new({
         title,
         children: content,
         showCancel,