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

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

@@ -1,3 +1,5 @@
+import Taro from '@tarojs/api'
+
 /**
  * H5 下的 styleSheet 操作
  * @author leeenx
@@ -7,14 +9,14 @@ class StyleSheet {
     this.$style = document.createElement('style')
   }
 
-  $style = null
-  sheet = null
+  $style: HTMLStyleElement
+  sheet?: CSSStyleSheet | null
   appendStyleSheet = () => {
-    this.$style.setAttribute('type', 'text/css')
-    this.$style.setAttribute('data-type', 'Taro')
+    this.$style?.setAttribute('type', 'text/css')
+    this.$style?.setAttribute('data-type', 'Taro')
     document.getElementsByTagName('head')[0].appendChild(this.$style)
-    this.sheet = this.$style.sheet
-    if (!('insertRule' in this.sheet)) {
+    this.sheet = this.$style?.sheet
+    if (this.sheet && !('insertRule' in this.sheet)) {
       console.warn('当前浏览器不支持 stylesheet.insertRule 接口')
     }
   }
@@ -25,7 +27,7 @@ class StyleSheet {
       // $style 未插入到 DOM
       this.appendStyleSheet()
     }
-    this.sheet.insertRule(cssText, index)
+    this.sheet?.insertRule(cssText, index)
   }
 }
 
@@ -36,34 +38,39 @@ let TRANSITION_END = 'transitionend'
 let TRANSFORM = 'transform'
 
 const $detect = document.createElement('div')
-$detect.style.cssText = `
-  -webkit-animation-name: webkit;
-  -moz-animation-name: moz;
-  -ms-animation-name: ms;
-  animation-name: standard;
-`
+$detect.style.cssText = '-webkit-animation-name:webkit;-moz-animation-name:moz;-ms-animation-name:ms;animation-name:standard;'
 if ($detect.style['animation-name'] === 'standard') {
   // 支持标准写法
   TRANSITION_END = 'transitionend'
   TRANSFORM = 'transform'
 } else if ($detect.style['-webkit-animation-name'] === 'webkit') {
   // webkit 前缀
-  TRANSITION_END = 'webkitTransionEnd'
+  TRANSITION_END = 'webkitTransitionEnd'
   TRANSFORM = '-webkit-transform'
 } else if ($detect.style['-moz-animation-name'] === 'moz') {
-  // webkit 前缀
-  TRANSITION_END = 'mozTransionEnd'
+  // moz 前缀
+  TRANSITION_END = 'mozTransitionEnd'
   TRANSFORM = '-moz-transform'
 } else if ($detect.style['-ms-animation-name'] === 'ms') {
-  // webkit 前缀
-  TRANSITION_END = 'MSTransionEnd'
+  // ms 前缀
+  TRANSITION_END = 'msTransitionEnd'
   TRANSFORM = '-ms-transform'
 }
 
 let animId = 0
 
-// Animation 类
-class Animation {
+interface IAnimationAttr {
+  duration: number
+  delay: number
+  timingFunction: string
+  transformOrigin: string
+}
+
+class Animation implements Taro.Animation {
+  unit: string
+  id: number
+  DEFAULT: IAnimationAttr
+
   constructor (
     {
       duration = 400,
@@ -71,7 +78,7 @@ class Animation {
       timingFunction = 'linear',
       transformOrigin = '50% 50% 0',
       unit = 'px'
-    } = {}
+    }: Taro.createAnimation.Option = {}
   ) {
     // 默认值
     this.setDefault(duration, delay, timingFunction, transformOrigin)
@@ -81,8 +88,8 @@ class Animation {
     // 动画 id
     this.id = ++animId
     // 监听事件
-    document.body.addEventListener(TRANSITION_END, e => {
-      const { target } = e
+    document.body.addEventListener(TRANSITION_END, (e: TransitionEvent) => {
+      const target = e.target as HTMLElement
       if (target.getAttribute(animAttr) === null) {
         animAttr = 'data-animation'
       }
@@ -91,12 +98,13 @@ class Animation {
       if (animData === null) return
       const [animName, animPath] = animData.split('__')
       if (animName === `taro-h5-poly-fill/${this.id}/create-animation`) {
-        const [animIndex, stepIndex = 0] = animPath.split('--')
+        const [animIndex, __stepIndex = 0] = animPath.split('--')
+        const stepIndex = Number(__stepIndex)
         // 动画总的关键帧
         const animStepsCount = this.animationMap[`${animName}__${animIndex}`]
         const animStepsMaxIndex = animStepsCount - 1
         if (stepIndex < animStepsMaxIndex) {
-          // 播放下一个关键帧（因为 nevr 和 react 有差异所以 animation & data-animation 都需要写）
+          // 播放下一个关键帧（因为 nerv 和 react 有差异所以 animation & data-animation 都需要写）
           target.setAttribute(animAttr, `${animName}__${animIndex}--${stepIndex + 1}`)
           if (animAttr === 'animation') {
             // Nerv 环境，animation & data-animation 双重保险
@@ -108,7 +116,7 @@ class Animation {
   }
 
   transformUnit (...args) {
-    const ret = []
+    const ret: string[] = []
     args.forEach(each => {
       ret.push(isNaN(each) ? each : `${each}${this.unit}`)
     })
@@ -121,32 +129,37 @@ class Animation {
   }
 
   // 属性组合
-  rules = []
+  rules: string[] = []
   // transform 对象
   transform = [`${TRANSFORM}:`]
   // 组合动画
-  steps = []
+  steps: string[] = []
   // 动画 map ----- 永久保留
   animationMap = {}
   // animationMap 的长度
   animationMapCount = 0
-  matrix (a, b, c, d, e, f) {
-    this.transform.push(`matrix(${a}, ${b}, ${c}, ${d}, ${e}, ${f})`)
+
+  matrix (a: number, b: number, c: number, d: number, tx: number, ty: number) {
+    this.transform.push(`matrix(${a}, ${b}, ${c}, ${d}, ${tx}, ${ty})`)
     return this
   }
 
-  matrix3d (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) {
+  matrix3d (a1: number, b1: number, c1: number, d1: number, a2: number, b2: number, c2: number, d2: number, a3: number, b3: number, c3: number, d3: number, a4: number, b4: number, c4: number, d4: number) {
     this.transform.push(`matrix3d(${a1}, ${b1}, ${c1}, ${d1}, ${a2}, ${b2}, ${c2}, ${d2}, ${a3}, ${b3}, ${c3}, ${d3}, ${a4}, ${b4}, ${c4}, ${d4})`)
     return this
   }
 
-  rotate (angle) {
+  rotate (angle: number) {
     this.transform.push(`rotate(${angle}deg)`)
     return this
   }
 
-  rotate3d (x, y, z, angle) {
-    this.transform.push(`rotate3d(${x}, ${y}, ${z}, ${angle}deg)`)
+  rotate3d (x: number, y?: number, z?: number, angle?: number) {
+    if (typeof y !== 'number') {
+      this.transform.push(`rotate3d(${x})`)
+    } else {
+      this.transform.push(`rotate3d(${x}, ${y || 0}, ${z || 0}, ${angle || 0}deg)`)
+    }
     return this
   }
 
@@ -284,7 +297,7 @@ class Animation {
   }
 
   // 关键帧载入
-  step (arg = {}) {
+  step (arg: Partial<IAnimationAttr> = {}) {
     const { DEFAULT } = this
     const {
       duration = DEFAULT.duration,
@@ -306,7 +319,7 @@ class Animation {
     // 清空 rules 和 transform
     this.rules = []
     this.transform = [`${TRANSFORM}:`]
-    return this
+    return this as Taro.Animation
   }
 
   // 创建底层数据
@@ -329,13 +342,11 @@ class Animation {
 
   // 动画数据产出
   export () {
-    return this.createAnimationData()
+    return this.createAnimationData() as unknown as ReturnType<Taro.Animation['export']>
   }
 }
 
 // h5 的 createAnimation
-function createAnimation (...arg) {
-  return new Animation(...arg)
+export const createAnimation: typeof Taro.createAnimation = (option) => {
+  return new Animation(option)
 }
-
-export { createAnimation }

package/src/api/ui/background.ts

@@ -0,0 +1,5 @@
+import { temporarilyNotSupport } from '../utils'
+
+// 背景
+export const setBackgroundTextStyle = temporarilyNotSupport('setBackgroundTextStyle')
+export const setBackgroundColor = temporarilyNotSupport('setBackgroundColor')

package/src/api/ui/custom-component.ts

@@ -0,0 +1,4 @@
+import Taro from '@tarojs/api'
+
+// 自定义组件
+export const nextTick = Taro.nextTick

package/src/api/ui/fonts.ts

@@ -0,0 +1,4 @@
+import { temporarilyNotSupport } from '../utils'
+
+// 字体
+export const loadFontFace = temporarilyNotSupport('loadFontFace')

package/src/api/ui/index.ts

@@ -0,0 +1,12 @@
+export * from './animation'
+export * from './background'
+export * from './custom-component'
+export * from './fonts'
+export * from './menu'
+export * from './navigation-bar'
+export * from './pull-down-refresh'
+export * from './scroll'
+export * from './sticky'
+export * from './tab-bar'
+export * from './window'
+export * from './interaction'

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