@tarojs/taro-h5 3.4.0-beta.0 → 3.4.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,21 @@ const toast = new Toast()
 const modal = new Modal()
 const actionSheet = new ActionSheet()
 
-function showToast (options = {}) {
+const showToast: typeof Taro.showToast = (options = { title: '' }) => {
   init(document)
-
-  const _default = {
+  options = Object.assign({
     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)
+  }, options)
+  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 +47,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 +60,42 @@ 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, 'toast')
+  } else {
+    errMsg = toast.show(options, 'toast')
+  }
+  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: '' }) => {
   init(document)
-
-  const _default = {
+  options = Object.assign({
     title: '',
     mask: false
-  }
+  }, options)
+  const { success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'showLoading', success, fail, complete })
+
   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,19 +105,25 @@ 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 = {}) => {
   init(document)
-
-  const _default = {
+  options = Object.assign({
     title: '',
     content: '',
     showCancel: true,
@@ -124,16 +131,13 @@ function showModal (options = {}) {
     cancelColor: '#000000',
     confirmText: '确定',
     confirmColor: '#3CC51F'
-  }
-  options = Object.assign({}, _default, options)
-
-  // verify options
-  const handler = errorHandler(options.fail, options.complete)
+  }, options)
+  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 +146,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 +156,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 +166,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: '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 +182,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: '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 +198,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 +209,15 @@ function showModal (options = {}) {
 
   options.showCancel = !!options.showCancel
 
-  if (!modal.el) return modal.create(options)
-  return modal.show(options)
+  let result = ''
+  if (!modal.el) {
+    result = await modal.create(options)
+  } else {
+    result = await modal.show(options)
+  }
+  const res = { cancel: !1, confirm: !1 }
+  res[result] = !0
+  return handle.success(res)
 }
 
 function hideModal () {
@@ -215,22 +225,19 @@ function hideModal () {
   modal.hide()
 }
 
-function showActionSheet (options = {}) {
+const showActionSheet: typeof Taro.showActionSheet = async (options = { itemList: [] }) => {
   init(document)
-
-  const _default = {
-    itemColor: '#000000'
-  }
-  options = Object.assign({}, _default, options)
-
-  // verify options
-  const handler = errorHandler(options.fail, options.complete)
+  options = Object.assign({
+    itemColor: '#000000',
+    itemList: []
+  }, options)
+  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 +246,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: '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: '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 +266,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 +275,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 +295,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 }

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

@@ -0,0 +1,237 @@
+import { inlineStyle } from '../../utils'
+
+export default class Modal {
+  options = {
+    title: '',
+    content: '',
+    showCancel: true,
+    cancelText: '取消',
+    cancelColor: '#000000',
+    confirmText: '确定',
+    confirmColor: '#3CC51F'
+  }
+
+  style = {
+    maskStyle: {
+      position: 'fixed',
+      'z-index': '1000',
+      top: '0',
+      right: '0',
+      left: '0',
+      bottom: '0',
+      background: 'rgba(0,0,0,0.6)'
+    },
+    modalStyle: {
+      'z-index': '4999',
+      position: 'fixed',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      width: '80%',
+      'max-width': '300px',
+      'border-radius': '3px',
+      'text-align': 'center',
+      'line-height': '1.6',
+      overflow: 'hidden',
+      background: '#FFFFFF'
+    },
+    titleStyle: {
+      padding: '20px 24px 9px',
+      'font-size': '18px'
+    },
+    textStyle: {
+      padding: '0 24px 12px',
+      'min-height': '40px',
+      'font-size': '15px',
+      'line-height': '1.3',
+      color: '#808080'
+    },
+    footStyle: {
+      position: 'relative',
+      'line-height': '48px',
+      'font-size': '18px',
+      display: 'flex'
+    },
+    btnStyle: {
+      position: 'relative',
+      '-webkit-box-flex': '1',
+      '-webkit-flex': '1',
+      flex: '1'
+    }
+  }
+
+  el: HTMLDivElement
+  title: HTMLDivElement
+  text: HTMLDivElement
+  cancel: HTMLDivElement
+  confirm: HTMLDivElement
+  hideOpacityTimer: any
+  hideDisplayTimer: any
+
+  create (options = {}) {
+    return new Promise<string>((resolve) => {
+      // style
+      const { maskStyle, modalStyle, titleStyle, textStyle, footStyle, btnStyle } = this.style
+
+      // configuration
+      const config = {
+        ...this.options,
+        ...options
+      }
+
+      // wrapper
+      this.el = document.createElement('div')
+      this.el.className = 'taro__modal'
+      this.el.style.opacity = '0'
+      this.el.style.transition = 'opacity 0.2s linear'
+
+      // mask
+      const mask = document.createElement('div')
+      mask.className = 'taro-modal__mask'
+      mask.setAttribute('style', inlineStyle(maskStyle))
+
+      // modal
+      const modal = document.createElement('div')
+      modal.className = 'taro-modal__content'
+      modal.setAttribute('style', inlineStyle(modalStyle))
+
+      // title
+      const titleCSS = config.title ? titleStyle : {
+        ...titleStyle,
+        display: 'none'
+      }
+      this.title = document.createElement('div')
+
+      this.title.className = 'taro-modal__title'
+      this.title.setAttribute('style', inlineStyle(titleCSS))
+      this.title.textContent = config.title
+
+      // text
+      const textCSS = config.title ? textStyle : {
+        ...textStyle,
+        padding: '40px 20px 26px',
+        color: '#353535'
+      }
+      this.text = document.createElement('div')
+      this.text.className = 'taro-modal__text'
+      this.text.setAttribute('style', inlineStyle(textCSS))
+      this.text.textContent = config.content
+
+      // foot
+      const foot = document.createElement('div')
+      foot.className = 'taro-modal__foot'
+      foot.setAttribute('style', inlineStyle(footStyle))
+
+      // cancel button
+      const cancelCSS = {
+        ...btnStyle,
+        color: config.cancelColor,
+        display: config.showCancel ? 'block' : 'none'
+      }
+      this.cancel = document.createElement('div')
+      this.cancel.className = 'taro-model__btn taro-model__cancel'
+      this.cancel.setAttribute('style', inlineStyle(cancelCSS))
+      this.cancel.textContent = config.cancelText
+      this.cancel.onclick = () => {
+        this.hide()
+        resolve('cancel')
+      }
+
+      // confirm button
+      this.confirm = document.createElement('div')
+      this.confirm.className = 'taro-model__btn taro-model__confirm'
+      this.confirm.setAttribute('style', inlineStyle(btnStyle))
+      this.confirm.style.color = config.confirmColor
+      this.confirm.textContent = config.confirmText
+      this.confirm.onclick = () => {
+        this.hide()
+        resolve('confirm')
+      }
+
+      // result
+      foot.appendChild(this.cancel)
+      foot.appendChild(this.confirm)
+      modal.appendChild(this.title)
+      modal.appendChild(this.text)
+      modal.appendChild(foot)
+      this.el.appendChild(mask)
+      this.el.appendChild(modal)
+
+      // show immediately
+      document.body.appendChild(this.el)
+      setTimeout(() => { this.el.style.opacity = '1' }, 0)
+    })
+  }
+
+  show (options = {}) {
+    return new Promise<string>((resolve) => {
+      const config = {
+        ...this.options,
+        ...options
+      }
+
+      if (this.hideOpacityTimer) clearTimeout(this.hideOpacityTimer)
+      if (this.hideDisplayTimer) clearTimeout(this.hideDisplayTimer)
+
+      // title & text
+      const { textStyle } = this.style
+
+      if (config.title) {
+        this.title.textContent = config.title
+        // none => block
+        this.title.style.display = 'block'
+        this.text.setAttribute('style', inlineStyle(textStyle))
+      } else {
+        // block => none
+        this.title.style.display = 'none'
+        const textCSS = {
+          ...textStyle,
+          padding: '40px 20px 26px',
+          color: '#353535'
+        }
+        this.text.setAttribute('style', inlineStyle(textCSS))
+      }
+
+      this.text.textContent = config.content || ''
+
+      // showCancel
+      this.cancel.style.display = config.showCancel ? 'block' : 'none'
+
+      // cancelText
+      this.cancel.textContent = config.cancelText || ''
+
+      // cancelColor
+      this.cancel.style.color = config.cancelColor || ''
+
+      // confirmText
+      this.confirm.textContent = config.confirmText || ''
+
+      // confirmColor
+      this.confirm.style.color = config.confirmColor || ''
+
+      // cbs
+      this.cancel.onclick = () => {
+        this.hide()
+        resolve('cancel')
+      }
+      this.confirm.onclick = () => {
+        this.hide()
+        resolve('confirm')
+      }
+
+      // show
+      this.el.style.display = 'block'
+      setTimeout(() => { this.el.style.opacity = '1' }, 0)
+    })
+  }
+
+  hide () {
+    if (this.hideOpacityTimer) clearTimeout(this.hideOpacityTimer)
+    if (this.hideDisplayTimer) clearTimeout(this.hideDisplayTimer)
+
+    this.hideOpacityTimer = setTimeout(() => {
+      this.el.style.opacity = '0'
+      this.hideDisplayTimer = setTimeout(() => { this.el.style.display = 'none' }, 200)
+    }, 0)
+  }
+}