@tarojs/taro-h5 3.3.16 → 3.3.17

package/src/api/ui/interaction/actionSheet.ts

@@ -0,0 +1,212 @@
+import { inlineStyle, setTransform } from '../../utils'
+
+const noop = function () {}
+
+export default class ActionSheet {
+  options = {
+    itemList: [],
+    itemColor: '#000000',
+    success: noop,
+    fail: noop,
+    complete: noop
+  }
+
+  style = {
+    maskStyle: {
+      position: 'fixed',
+      'z-index': '1000',
+      top: '0',
+      right: '0',
+      left: '0',
+      bottom: '0',
+      background: 'rgba(0,0,0,0.6)'
+    },
+    actionSheetStyle: {
+      'z-index': '4999',
+      position: 'fixed',
+      left: '0',
+      bottom: '0',
+      '-webkit-transform': 'translate(0, 100%)',
+      transform: 'translate(0, 100%)',
+      width: '100%',
+      'line-height': '1.6',
+      background: '#EFEFF4',
+      '-webkit-transition': '-webkit-transform .3s',
+      transition: 'transform .3s'
+    },
+    menuStyle: {
+      'background-color': '#FCFCFD'
+    },
+    cellStyle: {
+      position: 'relative',
+      padding: '10px 0',
+      'text-align': 'center',
+      'font-size': '18px'
+    },
+    cancelStyle: {
+      'margin-top': '6px',
+      padding: '10px 0',
+      'text-align': 'center',
+      'font-size': '18px',
+      color: '#000000',
+      'background-color': '#FCFCFD'
+    }
+  }
+
+  lastConfig = {}
+  el: HTMLDivElement
+  actionSheet: HTMLDivElement
+  menu: HTMLDivElement
+  cells: HTMLDivElement[]
+  cancel: HTMLDivElement
+  hideOpacityTimer: any
+  hideDisplayTimer: any
+
+  create (options = {}) {
+    return new Promise<string | number>((resolve) => {
+      // style
+      const { maskStyle, actionSheetStyle, menuStyle, cellStyle, cancelStyle } = this.style
+
+      // configuration
+      const config = {
+        ...this.options,
+        ...options
+      }
+
+      this.lastConfig = config
+
+      // wrapper
+      this.el = document.createElement('div')
+      this.el.className = 'taro__actionSheet'
+      this.el.style.opacity = '0'
+      this.el.style.transition = 'opacity 0.2s linear'
+
+      // mask
+      const mask = document.createElement('div')
+      mask.setAttribute('style', inlineStyle(maskStyle))
+
+      // actionSheet
+      this.actionSheet = document.createElement('div')
+      this.actionSheet.setAttribute('style', inlineStyle(actionSheetStyle))
+
+      // menu
+      this.menu = document.createElement('div')
+      this.menu.setAttribute('style', inlineStyle({
+        ...menuStyle,
+        color: config.itemColor
+      }))
+
+      // cells
+      this.cells = config.itemList.map((item, index) => {
+        const cell: HTMLDivElement = document.createElement('div')
+        cell.className = 'taro-actionsheet__cell'
+        cell.setAttribute('style', inlineStyle(cellStyle))
+        cell.textContent = item
+        cell.dataset.tapIndex = `${index}`
+        cell.onclick = e => {
+          this.hide()
+          const target = e.currentTarget as HTMLDivElement
+          const index = Number(target?.dataset.tapIndex) || 0
+          resolve(index)
+        }
+        return cell
+      })
+
+      // cancel
+      this.cancel = document.createElement('div')
+      this.cancel.setAttribute('style', inlineStyle(cancelStyle))
+      this.cancel.textContent = '取消'
+
+      // result
+      this.cells.forEach(item => this.menu.appendChild(item))
+      this.actionSheet.appendChild(this.menu)
+      this.actionSheet.appendChild(this.cancel)
+      this.el.appendChild(mask)
+      this.el.appendChild(this.actionSheet)
+
+      // callbacks
+      const cb = () => {
+        this.hide()
+        resolve('cancel')
+      }
+      mask.onclick = cb
+      this.cancel.onclick = cb
+
+      // show immediately
+      document.body.appendChild(this.el)
+      setTimeout(() => {
+        this.el.style.opacity = '1'
+        setTransform(this.actionSheet, 'translate(0, 0)')
+      }, 0)
+    })
+  }
+
+  show (options = {}) {
+    return new Promise<string | number>((resolve) => {
+      const config = {
+        ...this.options,
+        ...options
+      }
+
+      this.lastConfig = config
+
+      if (this.hideOpacityTimer) clearTimeout(this.hideOpacityTimer)
+      if (this.hideDisplayTimer) clearTimeout(this.hideDisplayTimer)
+
+      // itemColor
+      if (config.itemColor) this.menu.style.color = config.itemColor
+
+      // cells
+      const { cellStyle } = this.style
+
+      config.itemList.forEach((item, index) => {
+        let cell: HTMLDivElement
+        if (this.cells[index]) {
+          // assign new content
+          cell = this.cells[index]
+        } else {
+          // create new cell
+          cell = document.createElement('div')
+          cell.className = 'taro-actionsheet__cell'
+          cell.setAttribute('style', inlineStyle(cellStyle))
+          cell.dataset.tapIndex = `${index}`
+          this.cells.push(cell)
+          this.menu.appendChild(cell)
+        }
+        cell.textContent = item
+        cell.onclick = e => {
+          this.hide()
+          const target = e.currentTarget as HTMLDivElement
+          const index = Number(target?.dataset.tapIndex) || 0
+          resolve(index)
+        }
+      })
+      const cellsLen = this.cells.length
+      const itemListLen = config.itemList.length
+      if (cellsLen > itemListLen) {
+        for (let i = itemListLen; i < cellsLen; i++) {
+          this.menu.removeChild(this.cells[i])
+        }
+        this.cells.splice(itemListLen)
+      }
+
+      // show
+      this.el.style.display = 'block'
+      setTimeout(() => {
+        this.el.style.opacity = '1'
+        setTransform(this.actionSheet, 'translate(0, 0)')
+      }, 0)
+    })
+  }
+
+  hide () {
+    if (this.hideOpacityTimer) clearTimeout(this.hideOpacityTimer)
+    if (this.hideDisplayTimer) clearTimeout(this.hideDisplayTimer)
+
+    this.hideOpacityTimer = setTimeout(() => {
+      this.el.style.opacity = '0'
+      setTransform(this.actionSheet, 'translate(0, 100%)')
+      this.hideDisplayTimer = setTimeout(() => { this.el.style.display = 'none' }, 200)
+    }, 0)
+  }
+}

package/src/api/{interactive/index.js → ui/interaction/index.ts}

@@ -1,9 +1,12 @@
 import Taro from '@tarojs/api'
-import { errorHandler, getParameterError } from '../utils'
+import { getParameterError, temporarilyNotSupport } from '../../utils'
+import { MethodHandler } from '../../utils/handler'
 import Toast from './toast'
 import Modal from './modal'
 import ActionSheet from './actionSheet'
 
+// 交互
+
 let status = 'default'
 
 // inject necessary style
@@ -21,26 +24,20 @@ const toast = new Toast()
 const modal = new Modal()
 const actionSheet = new ActionSheet()
 
-function showToast (options = {}) {
+const showToast: typeof Taro.showToast = (options = {
+  title: '',
+  icon: 'success',
+  image: '',
+  duration: 1500,
+  mask: false
+}) => {
   init(document)
-
-  const _default = {
-    title: '',
-    icon: 'success',
-    image: '',
-    duration: 1500,
-    mask: false
-  }
-  options = Object.assign({}, _default, options)
-  options._type = 'toast'
-
-  // verify options
-  const handler = errorHandler(options.fail, options.complete)
+  const { success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'showToast', success, fail, complete })
 
   if (typeof options.title !== 'string') {
-    return handler({
+    return handle.fail({
       errMsg: getParameterError({
-        name: 'showToast',
         para: 'title',
         correct: 'String',
         wrong: options.title
@@ -49,9 +46,8 @@ function showToast (options = {}) {
   }
 
   if (typeof options.duration !== 'number') {
-    return handler({
+    return handle.fail({
       errMsg: getParameterError({
-        name: 'showToast',
         para: 'duration',
         correct: 'Number',
         wrong: options.duration
@@ -63,38 +59,41 @@ function showToast (options = {}) {
 
   options.mask = !!options.mask
 
-  if (!toast.el) return toast.create(options)
-  return toast.show(options)
+  let errMsg = ''
+  if (!toast.el) {
+    errMsg = toast.create(options, 'loading')
+  } else {
+    errMsg = toast.show(options, 'loading')
+  }
+  return handle.success({ errMsg })
 }
 
-function hideToast () {
-  if (!toast.el) return
+const hideToast: typeof Taro.hideToast = ({ success, fail, complete } = {}) => {
+  const handle = new MethodHandler({ name: 'hideToast', success, fail, complete })
+  if (!toast.el) return handle.success()
   toast.hide(0, 'toast')
+  return handle.success()
 }
 
-function showLoading (options = {}) {
+const showLoading: typeof Taro.showLoading = (options = {
+  title: '',
+  mask: false
+}) => {
   init(document)
+  const { success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'showLoading', success, fail, complete })
 
-  const _default = {
-    title: '',
-    mask: false
-  }
   const config = {
     icon: 'loading',
     image: '',
     duration: -1
   }
 
-  options = Object.assign({}, _default, options, config)
-  options._type = 'loading'
-
-  // verify options
-  const handler = errorHandler(options.fail, options.complete)
+  options = Object.assign({}, options, config)
 
   if (typeof options.title !== 'string') {
-    return handler({
+    return handle.fail({
       errMsg: getParameterError({
-        name: 'showLoading',
         para: 'title',
         correct: 'String',
         wrong: options.title
@@ -104,36 +103,38 @@ function showLoading (options = {}) {
 
   options.mask = !!options.mask
 
-  if (!toast.el) return toast.create(options)
-  return toast.show(options)
+  let errMsg = ''
+  if (!toast.el) {
+    errMsg = toast.create(options, 'loading')
+  } else {
+    errMsg = toast.show(options, 'loading')
+  }
+  return handle.success({ errMsg })
 }
 
-function hideLoading () {
-  if (!toast.el) return
+const hideLoading: typeof Taro.hideLoading = ({ success, fail, complete } = {}) => {
+  const handle = new MethodHandler({ name: 'hideLoading', success, fail, complete })
+  if (!toast.el) return handle.success()
   toast.hide(0, 'loading')
+  return handle.success()
 }
 
-function showModal (options = {}) {
+const showModal: typeof Taro.showModal = async (options = {
+  title: '',
+  content: '',
+  showCancel: true,
+  cancelText: '取消',
+  cancelColor: '#000000',
+  confirmText: '确定',
+  confirmColor: '#3CC51F'
+}) => {
   init(document)
-
-  const _default = {
-    title: '',
-    content: '',
-    showCancel: true,
-    cancelText: '取消',
-    cancelColor: '#000000',
-    confirmText: '确定',
-    confirmColor: '#3CC51F'
-  }
-  options = Object.assign({}, _default, options)
-
-  // verify options
-  const handler = errorHandler(options.fail, options.complete)
+  const { success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'showModal', success, fail, complete })
 
   if (typeof options.title !== 'string') {
-    return handler({
+    return handle.fail({
       errMsg: getParameterError({
-        name: 'showModal',
         para: 'title',
         correct: 'String',
         wrong: options.title
@@ -142,9 +143,8 @@ function showModal (options = {}) {
   }
 
   if (typeof options.content !== 'string') {
-    return handler({
+    return handle.fail({
       errMsg: getParameterError({
-        name: 'showModal',
         para: 'content',
         correct: 'String',
         wrong: options.content
@@ -153,9 +153,8 @@ function showModal (options = {}) {
   }
 
   if (typeof options.cancelText !== 'string') {
-    return handler({
+    return handle.fail({
       errMsg: getParameterError({
-        name: 'showModal',
         para: 'cancelText',
         correct: 'String',
         wrong: options.cancelText
@@ -164,13 +163,14 @@ function showModal (options = {}) {
   }
 
   if (options.cancelText.replace(/[\u0391-\uFFE5]/g, 'aa').length > 8) {
-    return handler({ errMsg: 'showModal:fail cancelText length should not larger then 4 Chinese characters' })
+    return handle.fail({
+      errMsg: 'showModal:fail cancelText length should not larger then 4 Chinese characters'
+    })
   }
 
   if (typeof options.confirmText !== 'string') {
-    return handler({
+    return handle.fail({
       errMsg: getParameterError({
-        name: 'showModal',
         para: 'confirmText',
         correct: 'String',
         wrong: options.confirmText
@@ -179,13 +179,14 @@ function showModal (options = {}) {
   }
 
   if (options.confirmText.replace(/[\u0391-\uFFE5]/g, 'aa').length > 8) {
-    return handler({ errMsg: 'showModal:fail confirmText length should not larger then 4 Chinese characters' })
+    return handle.fail({
+      errMsg: 'showModal:fail confirmText length should not larger then 4 Chinese characters'
+    })
   }
 
   if (typeof options.cancelColor !== 'string') {
-    return handler({
+    return handle.fail({
       errMsg: getParameterError({
-        name: 'showModal',
         para: 'cancelColor',
         correct: 'String',
         wrong: options.cancelColor
@@ -194,9 +195,8 @@ function showModal (options = {}) {
   }
 
   if (typeof options.confirmColor !== 'string') {
-    return handler({
+    return handle.fail({
       errMsg: getParameterError({
-        name: 'showModal',
         para: 'confirmColor',
         correct: 'String',
         wrong: options.confirmColor
@@ -206,8 +206,13 @@ function showModal (options = {}) {
 
   options.showCancel = !!options.showCancel
 
-  if (!modal.el) return modal.create(options)
-  return modal.show(options)
+  let errMsg = ''
+  if (!modal.el) {
+    errMsg = await modal.create(options)
+  } else {
+    errMsg = await modal.show(options)
+  }
+  return handle.success({ errMsg })
 }
 
 function hideModal () {
@@ -215,22 +220,18 @@ function hideModal () {
   modal.hide()
 }
 
-function showActionSheet (options = {}) {
+const showActionSheet: typeof Taro.showActionSheet = async (options = {
+  itemColor: '#000000',
+  itemList: []
+}) => {
   init(document)
-
-  const _default = {
-    itemColor: '#000000'
-  }
-  options = Object.assign({}, _default, options)
-
-  // verify options
-  const handler = errorHandler(options.fail, options.complete)
+  const { success, fail, complete } = options
+  const handle = new MethodHandler<Taro.showActionSheet.SuccessCallbackResult>({ name: 'showActionSheet', success, fail, complete })
 
   // list item String
   if (!Array.isArray(options.itemList)) {
-    return handler({
+    return handle.fail({
       errMsg: getParameterError({
-        name: 'showActionSheet',
         para: 'itemList',
         correct: 'Array',
         wrong: options.itemList
@@ -239,18 +240,17 @@ function showActionSheet (options = {}) {
   }
 
   if (options.itemList.length < 1) {
-    return handler({ errMsg: 'showActionSheet:fail parameter error: parameter.itemList should have at least 1 item' })
+    return handle.fail({ errMsg: 'showActionSheet:fail parameter error: parameter.itemList should have at least 1 item' })
   }
 
   if (options.itemList.length > 6) {
-    return handler({ errMsg: 'showActionSheet:fail parameter error: parameter.itemList should not be large than 6' })
+    return handle.fail({ errMsg: 'showActionSheet:fail parameter error: parameter.itemList should not be large than 6' })
   }
 
   for (let i = 0; i < options.itemList.length; i++) {
     if (typeof options.itemList[i] !== 'string') {
-      return handler({
+      return handle.fail({
         errMsg: getParameterError({
-          name: 'showActionSheet',
           para: `itemList[${i}]`,
           correct: 'String',
           wrong: options.itemList[i]
@@ -260,9 +260,8 @@ function showActionSheet (options = {}) {
   }
 
   if (typeof options.itemColor !== 'string') {
-    return handler({
+    return handle.fail({
       errMsg: getParameterError({
-        name: 'showActionSheet',
         para: 'itemColor',
         correct: 'String',
         wrong: options.itemColor
@@ -270,8 +269,18 @@ function showActionSheet (options = {}) {
     })
   }
 
-  if (!actionSheet.el) return actionSheet.create(options)
-  return actionSheet.show(options)
+  let result: number | string = ''
+  if (!actionSheet.el) {
+    result = await actionSheet.create(options)
+  } else {
+    result = await actionSheet.show(options)
+  }
+
+  if (typeof result === 'string') {
+    return handle.fail(({ errMsg: result }))
+  } else {
+    return handle.success(({ tapIndex: result }))
+  }
 }
 
 Taro.eventCenter.on('__taroRouterChange', () => {
@@ -280,4 +289,7 @@ Taro.eventCenter.on('__taroRouterChange', () => {
   hideModal()
 })
 
-export { showToast, hideToast, showLoading, hideLoading, showModal, showActionSheet }
+const enableAlertBeforeUnload = temporarilyNotSupport('enableAlertBeforeUnload')
+const disableAlertBeforeUnload = temporarilyNotSupport('disableAlertBeforeUnload')
+
+export { showToast, showModal, showLoading, showActionSheet, hideToast, hideLoading, enableAlertBeforeUnload, disableAlertBeforeUnload }