@tarojs/taro-h5 3.3.13 → 3.3.17

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)
+  }
+}

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

@@ -1,6 +1,4 @@
-import { inlineStyle } from '../utils'
-
-const noop = function () {}
+import { inlineStyle } from '../../utils'
 
 export default class Toast {
   options = {
@@ -8,10 +6,7 @@ export default class Toast {
     icon: 'none',
     image: '',
     duration: 1500,
-    mask: false,
-    success: noop,
-    fail: noop,
-    complete: noop
+    mask: false
   }
 
   style = {
@@ -45,13 +40,18 @@ export default class Toast {
       background: 'rgba(17, 17, 17, 0.7)'
     },
     successStyle: {
-      margin: '0',
-      'vertical-align': 'middle',
-      'font-family': 'taro',
-      '-webkit-font-smoothing': 'antialiased',
-      color: '#FFFFFF',
-      'font-size': '55px',
-      'line-height': '1'
+      margin: '6px auto',
+      width: '38px',
+      height: '38px',
+      background: 'transparent url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjM5NTQ4OTYzMjA0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQzNDgiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNMjE5Ljk1MiA1MTIuNTc2bDIxMC40MzIgMjEwLjQzMi00NS4yNDggNDUuMjU2LTIxMC40MzItMjEwLjQzMnoiIHAtaWQ9IjQzNDkiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD48cGF0aCBkPSJNNzk5LjY3MiAyNjIuMjY0bDQ1LjI1NiA0NS4yNTYtNDYwLjQ2NCA0NjAuNDY0LTQ1LjI1Ni00NS4yNTZ6IiBwLWlkPSI0MzUwIiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+) no-repeat',
+      'background-size': '100%'
+    },
+    errrorStyle: {
+      margin: '6px auto',
+      width: '38px',
+      height: '38px',
+      background: 'transparent url(data:image/svg+xml;base64,PHN2ZyB0PSIxNjM5NTUxMDU1MTgzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0MDc2IiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PHBhdGggZD0iTTUxMiA2NEMyNjQuNTggNjQgNjQgMjY0LjU4IDY0IDUxMnMyMDAuNTggNDQ4IDQ0OCA0NDggNDQ4LTIwMC41OCA0NDgtNDQ4Uzc1OS40MiA2NCA1MTIgNjR6IG0wIDc1MmEzNiAzNiAwIDEgMSAzNi0zNiAzNiAzNiAwIDAgMS0zNiAzNnogbTUxLjgzLTU1MS45NUw1NDggNjM2YTM2IDM2IDAgMCAxLTcyIDBsLTE1LjgzLTM3MS45NWMtMC4xLTEuMzMtMC4xNy0yLjY4LTAuMTctNC4wNWE1MiA1MiAwIDAgMSAxMDQgMGMwIDEuMzctMC4wNyAyLjcyLTAuMTcgNC4wNXoiIHAtaWQ9IjE0MDc3IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9zdmc+) no-repeat',
+      'background-size': '100%'
     },
     loadingStyle: {
       margin: '6px auto',
@@ -75,14 +75,24 @@ export default class Toast {
     }
   }
 
-  create (options = {}) {
+  el: HTMLDivElement
+  mask: HTMLDivElement
+  icon: HTMLParagraphElement
+  toast: HTMLDivElement
+  title: HTMLParagraphElement
+  type: any
+  hideOpacityTimer: any
+  hideDisplayTimer: any
+
+  create (options = {}, _type: 'loading' | 'toast' = 'toast') {
     // style
-    const { maskStyle, toastStyle, successStyle, loadingStyle, imageStyle, textStyle } = this.style
+    const { maskStyle, toastStyle, successStyle, errrorStyle, loadingStyle, imageStyle, textStyle } = this.style
 
     // configuration
     const config = {
       ...this.options,
-      ...options
+      ...options,
+      _type
     }
 
     // wrapper
@@ -104,12 +114,11 @@ export default class Toast {
         'background-image': `url(${config.image})`
       }))
     } else {
-      const iconStyle = config.icon === 'loading' ? loadingStyle : successStyle
+      const iconStyle = config.icon === 'loading' ? loadingStyle : config.icon === 'error' ? errrorStyle : successStyle
       this.icon.setAttribute('style', inlineStyle({
         ...iconStyle,
         ...(config.icon === 'none' ? { display: 'none' } : {})
       }))
-      if (config.icon !== 'loading') this.icon.textContent = ''
     }
 
     // toast
@@ -141,16 +150,14 @@ export default class Toast {
     // disappear after duration
     config.duration >= 0 && this.hide(config.duration, this.type)
 
-    const errMsg = this.type === 'loading' ? 'showLoading:ok' : 'showToast:ok'
-    config.success && config.success({ errMsg })
-    config.complete && config.complete({ errMsg })
-    return Promise.resolve({ errMsg })
+    return ''
   }
 
-  show (options = {}) {
+  show (options = {}, _type: 'loading' | 'toast' = 'toast') {
     const config = {
       ...this.options,
-      ...options
+      ...options,
+      _type
     }
 
     if (this.hideOpacityTimer) clearTimeout(this.hideOpacityTimer)
@@ -163,21 +170,19 @@ export default class Toast {
     this.mask.style.display = config.mask ? 'block' : 'none'
 
     // image
-    const { toastStyle, successStyle, loadingStyle, imageStyle } = this.style
+    const { toastStyle, successStyle, errrorStyle, loadingStyle, imageStyle } = this.style
     if (config.image) {
       this.icon.setAttribute('style', inlineStyle({
         ...imageStyle,
         'background-image': `url(${config.image})`
       }))
-      this.icon.textContent = ''
     } else {
       if (!config.image && config.icon) {
-        const iconStyle = config.icon === 'loading' ? loadingStyle : successStyle
+        const iconStyle = config.icon === 'loading' ? loadingStyle : config.icon === 'error' ? errrorStyle : successStyle
         this.icon.setAttribute('style', inlineStyle({
           ...iconStyle,
           ...(config.icon === 'none' ? { display: 'none' } : {})
         }))
-        this.icon.textContent = config.icon === 'loading' ? '' : ''
       }
     }
 
@@ -198,10 +203,7 @@ export default class Toast {
     // disappear after duration
     config.duration >= 0 && this.hide(config.duration, this.type)
 
-    const errMsg = this.type === 'loading' ? 'showLoading:ok' : 'showToast:ok'
-    config.success && config.success({ errMsg })
-    config.complete && config.complete({ errMsg })
-    return Promise.resolve({ errMsg })
+    return ''
   }
 
   hide (duration = 0, type) {

package/src/api/ui/menu.ts

@@ -0,0 +1,4 @@
+import { temporarilyNotSupport } from '../utils'
+
+// 菜单
+export const getMenuButtonBoundingClientRect = temporarilyNotSupport('getMenuButtonBoundingClientRect')

package/src/api/ui/navigation-bar/index.ts

@@ -0,0 +1,52 @@
+import Taro from '@tarojs/taro'
+
+import { MethodHandler } from '../../utils/handler'
+import { getParameterError, shouldBeObject, temporarilyNotSupport } from '../../utils'
+
+// 导航栏
+export const showNavigationBarLoading = temporarilyNotSupport('showNavigationBarLoading')
+
+export function setNavigationBarTitle (options) {
+  // options must be an Object
+  const isObject = shouldBeObject(options)
+  if (!isObject.flag) {
+    const res = { errMsg: `setNavigationBarTitle:fail ${isObject.msg}` }
+    console.error(res.errMsg)
+    return Promise.reject(res)
+  }
+
+  const { title, success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'makePhoneCall', success, fail, complete })
+
+  if (!title || typeof title !== 'string') {
+    return handle.fail({
+      errMsg: getParameterError({
+        para: 'title',
+        correct: 'String',
+        wrong: title
+      })
+    })
+  }
+
+  if (document.title !== title) {
+    document.title = title
+  }
+
+  return handle.success()
+}
+
+/**
+ * 设置页面导航条颜色
+ */
+export const setNavigationBarColor: typeof Taro.setNavigationBarColor = (options) => {
+  const { backgroundColor, success, fail, complete } = options
+  const handle = new MethodHandler({ name: 'setNavigationBarColor', success, fail, complete })
+  const meta = document.createElement('meta')
+  meta.setAttribute('name', 'theme-color')
+  meta.setAttribute('content', backgroundColor)
+  document.head.appendChild(meta)
+  return handle.success()
+}
+
+export const hideNavigationBarLoading = temporarilyNotSupport('hideNavigationBarLoading')
+export const hideHomeButton = temporarilyNotSupport('hideHomeButton')

package/src/api/ui/pull-down-refresh.ts

@@ -0,0 +1,32 @@
+import Taro from '@tarojs/api'
+import { MethodHandler } from '../utils/handler'
+/**
+ * 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
+ */
+const startPullDownRefresh: typeof Taro.startPullDownRefresh = function ({ success, fail, complete } = {}) {
+  const handle = new MethodHandler({ name: 'startPullDownRefresh', success, fail, complete })
+  return new Promise((resolve, reject) => {
+    Taro.eventCenter.trigger('__taroStartPullDownRefresh', {
+      successHandler: (res = {}) => handle.success(res, resolve as any),
+      errorHandler: (res = {}) => handle.fail(res, reject as any)
+    })
+  })
+}
+
+/**
+ * 停止当前页面下拉刷新。
+ */
+const stopPullDownRefresh: typeof Taro.stopPullDownRefresh = function ({ success, fail, complete } = {}) {
+  const handle = new MethodHandler({ name: 'stopPullDownRefresh', success, fail, complete })
+  return new Promise((resolve, reject) => {
+    Taro.eventCenter.trigger('__taroStopPullDownRefresh', {
+      successHandler: (res = {}) => handle.success(res, resolve as any),
+      errorHandler: (res = {}) => handle.fail(res, reject as any)
+    })
+  })
+}
+
+export {
+  startPullDownRefresh,
+  stopPullDownRefresh
+}

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

@@ -1,28 +1,23 @@
-import { getTimingFunc, easeInOut } from '../utils/index'
+import Taro from '@tarojs/api'
 
-/**
- * @typedef {object} PageScrollToParam pageScrollTo参数
- * @property {number} scrollTop 滚动到页面的目标位置，单位 px
- * @property {string} selector 选择器, css selector
- * @property {number} [duration=300] 滚动动画的时长，单位 ms
- * @property {function} [success] 接口调用成功的回调函数
- * @property {function} [fail] 接口调用失败的回调函数
- * @property {function} [complete] 接口调用结束的回调函数（调用成功、失败都会执行）
- */
+import { MethodHandler } from '../../utils/handler'
+import { getTimingFunc, easeInOut } from '../../utils'
 
 let scrollFunc
-let timer
+let timer: NodeJS.Timeout
 const FRAME_DURATION = 17
 
 /**
  * 将页面滚动到目标位置
- * @param {PageScrollToParam} object 参数
  */
-export const pageScrollTo = ({ scrollTop, selector, duration = 300, success, fail, complete }) => {
+export const pageScrollTo: typeof Taro.pageScrollTo = ({ scrollTop, selector = '', duration = 300, success, fail, complete }) => {
+  const handle = new MethodHandler({ name: 'pageScrollTo', success, fail, complete })
   return new Promise((resolve, reject) => {
     try {
       if (scrollTop === undefined && !selector) {
-        throw Error('"scrollTop" 或 "selector" 需要其之一')
+        return handle.fail({
+          errMsg: 'scrollTop" 或 "selector" 需要其之一'
+        }, reject)
       }
 
       let el
@@ -58,11 +53,12 @@ export const pageScrollTo = ({ scrollTop, selector, duration = 300, success, fai
         console.warn('"scrollTop" 或 "selector" 建议只设一个值，全部设置会忽略selector')
       }
       const from = scrollFunc()
-      let to
+      let to: number
       if (typeof scrollTop === 'number') {
         to = scrollTop
       } else {
-        to = document.querySelector(selector).offsetTop
+        const el = document.querySelector(selector) as HTMLElement
+        to = el?.offsetTop || 0
       }
       const delta = to - from
 
@@ -78,22 +74,14 @@ export const pageScrollTo = ({ scrollTop, selector, duration = 300, success, fai
             scroll(frame + 1)
           }, FRAME_DURATION)
         } else {
-          const res = {
-            errMsg: 'pageScrollTo:ok'
-          }
-          success && success(res)
-          complete && complete()
-          resolve(res)
+          return handle.success({}, resolve)
         }
       }
       scroll()
     } catch (e) {
-      const res = {
-        errMsg: `pageScrollTo:fail ${e.message}`
-      }
-      fail && fail(res)
-      complete && complete()
-      reject(res)
+      return handle.fail({
+        errMsg: e.message
+      }, reject)
     }
   })
 }

package/src/api/ui/sticky.ts

@@ -0,0 +1,4 @@
+import { temporarilyNotSupport } from '../utils'
+
+// 置顶
+export const setTopBarText = temporarilyNotSupport('setTopBarText')