@tarojs/taro-h5 3.4.0-beta.0 → 3.4.0-beta.1

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,27 @@
+import Taro from '@tarojs/api'
+import { MethodHandler } from '../utils/handler'
+/**
+ * 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
+ */
+export 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)
+    })
+  })
+}
+
+/**
+ * 停止当前页面下拉刷新。
+ */
+export 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)
+    })
+  })
+}

package/src/api/ui/scroll/index.ts

@@ -0,0 +1,85 @@
+import Taro from '@tarojs/api'
+import { Current } from '@tarojs/runtime'
+
+import { MethodHandler } from '../../utils/handler'
+import { getTimingFunc, easeInOut } from '../../utils'
+
+let timer: number
+const FRAME_DURATION = 17
+
+/**
+ * 将页面滚动到目标位置
+ */
+export const pageScrollTo: typeof Taro.pageScrollTo = ({ scrollTop, selector = '', duration = 300, success, fail, complete }) => {
+  let scrollFunc
+  const handle = new MethodHandler({ name: 'pageScrollTo', success, fail, complete })
+  return new Promise((resolve, reject) => {
+    try {
+      if (scrollTop === undefined && !selector) {
+        return handle.fail({
+          errMsg: 'scrollTop" 或 "selector" 需要其之一'
+        }, reject)
+      }
+
+      const id = Current.page?.path
+      const el: HTMLDivElement | null = (id
+        ? document.getElementById(id)
+        : document.querySelector('.taro_page') ||
+      document.querySelector('.taro_router')) as HTMLDivElement
+
+      if (!scrollFunc) {
+        if (!el) {
+          scrollFunc = pos => {
+            if (pos === undefined) {
+              return window.pageYOffset
+            } else {
+              window.scrollTo(0, pos)
+            }
+          }
+        } else {
+          scrollFunc = pos => {
+            if (pos === undefined) {
+              return el.scrollTop
+            } else {
+              el.scrollTop = pos
+            }
+          }
+        }
+      }
+
+      if (scrollTop && selector) {
+        console.warn('"scrollTop" 或 "selector" 建议只设一个值，全部设置会忽略selector')
+      }
+      const from = scrollFunc()
+      let to: number
+      if (typeof scrollTop === 'number') {
+        to = scrollTop
+      } else {
+        const el = document.querySelector(selector) as HTMLElement
+        to = el?.offsetTop || 0
+      }
+      const delta = to - from
+
+      const frameCnt = duration / FRAME_DURATION
+      const easeFunc = getTimingFunc(easeInOut, frameCnt)
+
+      const scroll = (frame = 0) => {
+        const dest = from + delta * easeFunc(frame)
+        scrollFunc(dest)
+        if (frame < frameCnt) {
+          timer && clearTimeout(timer)
+          timer = setTimeout(() => {
+            scroll(frame + 1)
+          }, FRAME_DURATION)
+        } else {
+          return handle.success({}, resolve)
+        }
+      }
+      scroll()
+    } catch (e) {
+      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')