@tarojs/taro-h5 3.5.0-alpha.13 → 3.5.0-alpha.16

package/src/api/ui/fonts.ts

@@ -1,64 +0,0 @@
-import Taro from '@tarojs/api'
-
-import { MethodHandler } from '../../utils/handler'
-
-// 字体
-export const loadFontFace: typeof Taro.loadFontFace = async options => {
-  options = Object.assign({ global: false }, options)
-  const { success, fail, complete, family, source, desc = {} } = options
-  const handle = new MethodHandler({ name: 'loadFontFace', success, fail, complete })
-  // @ts-ignore
-  const fonts = document.fonts
-  if (fonts) {
-    // @ts-ignore
-    const fontFace = new FontFace(family, source, desc)
-    try {
-      await fontFace.load()
-      fonts.add(fontFace)
-      return handle.success({})
-    } catch (error) {
-      return handle.fail({
-        errMsg: error.message || error
-      })
-    }
-  } else {
-    const style = document.createElement('style')
-    let innerText = `font-family:"${
-      family
-    }";src:${
-      source
-    };font-style:${
-      desc.style || 'normal'
-    };font-weight:${
-      desc.weight || 'normal'
-    };font-variant:${
-      desc.variant || 'normal'
-    };`
-
-    if (desc.ascentOverride) {
-      innerText += `ascent-override:${desc.ascentOverride};`
-    }
-    if (desc.descentOverride) {
-      innerText += `descent-override:${desc.descentOverride};`
-    }
-    if (desc.featureSettings) {
-      innerText += `font-feature-settings:${desc.featureSettings};`
-    }
-    if (desc.lineGapOverride) {
-      innerText += `line-gap-override:${desc.lineGapOverride};`
-    }
-    if (desc.stretch) {
-      innerText += `font-stretch:${desc.stretch};`
-    }
-    if (desc.unicodeRange) {
-      innerText += `unicode-range:${desc.unicodeRange};`
-    }
-    if (desc.variationSettings) {
-      innerText += `font-variation-settings:${desc.variationSettings};`
-    }
-
-    style.innerText = `@font-face{${innerText}}`
-    document.head.appendChild(style)
-    return handle.success()
-  }
-}

package/src/api/ui/index.ts

@@ -1,12 +0,0 @@
-export * from './animation'
-export * from './background'
-export * from './custom-component'
-export * from './fonts'
-export * from './interaction'
-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'

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

@@ -1,212 +0,0 @@
-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: ReturnType<typeof setTimeout>
-  hideDisplayTimer: ReturnType<typeof setTimeout>
-
-  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/ui/interaction/index.ts

@@ -1,302 +0,0 @@
-import Taro from '@tarojs/api'
-
-import { getParameterError, temporarilyNotSupport } from '../../../utils'
-import { MethodHandler } from '../../../utils/handler'
-import ActionSheet from './actionSheet'
-import Modal from './modal'
-import Toast from './toast'
-
-// 交互
-
-let status = 'default'
-
-// inject necessary style
-function init (doc) {
-  if (status === 'ready') return
-
-  const taroStyle = doc.createElement('style')
-  taroStyle.textContent = '@font-face{font-weight:normal;font-style:normal;font-family:"taro";src:url("data:application/x-font-ttf;charset=utf-8;base64, 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") format("truetype");}@-webkit-keyframes taroLoading{0%{-webkit-transform:rotate3d(0, 0, 1, 0deg);}100%{-webkit-transform:rotate3d(0, 0, 1, 360deg);transform:rotate3d(0, 0, 1, 360deg);}}@keyframes taroLoading{0%{-webkit-transform:rotate3d(0, 0, 1, 0deg);}100%{-webkit-transform:rotate3d(0, 0, 1, 360deg);transform:rotate3d(0, 0, 1, 360deg);}}.taro-modal__foot:after {content: "";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #D5D5D6;color: #D5D5D6;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);} .taro-model__btn:active {background-color: #EEEEEE}.taro-model__btn:not(:first-child):after {content: "";position: absolute;left: 0;top: 0;width: 1px;bottom: 0;border-left: 1px solid #D5D5D6;color: #D5D5D6;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleX(0.5);transform: scaleX(0.5);}.taro-actionsheet__cell:not(:first-child):after {content: "";position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid #e5e5e5;color: #e5e5e5;-webkit-transform-origin: 0 0;transform-origin: 0 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}'
-  doc.querySelector('head').appendChild(taroStyle)
-
-  status = 'ready'
-}
-
-const toast = new Toast()
-const modal = new Modal()
-const actionSheet = new ActionSheet()
-
-const showToast: typeof Taro.showToast = (options = { title: '' }) => {
-  init(document)
-  options = Object.assign({
-    title: '',
-    icon: 'success',
-    image: '',
-    duration: 1500,
-    mask: false
-  }, options)
-  const { success, fail, complete } = options
-  const handle = new MethodHandler({ name: 'showToast', success, fail, complete })
-
-  if (typeof options.title !== 'string') {
-    return handle.fail({
-      errMsg: getParameterError({
-        para: 'title',
-        correct: 'String',
-        wrong: options.title
-      })
-    })
-  }
-
-  if (typeof options.duration !== 'number') {
-    return handle.fail({
-      errMsg: getParameterError({
-        para: 'duration',
-        correct: 'Number',
-        wrong: options.duration
-      })
-    })
-  }
-
-  if (options.image && typeof options.image !== 'string') options.image = ''
-
-  options.mask = !!options.mask
-
-  let errMsg = ''
-  if (!toast.el) {
-    errMsg = toast.create(options, 'toast')
-  } else {
-    errMsg = toast.show(options, 'toast')
-  }
-  return handle.success({ errMsg })
-}
-
-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()
-}
-
-const showLoading: typeof Taro.showLoading = (options = { title: '' }) => {
-  init(document)
-  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({}, options, config)
-
-  if (typeof options.title !== 'string') {
-    return handle.fail({
-      errMsg: getParameterError({
-        para: 'title',
-        correct: 'String',
-        wrong: options.title
-      })
-    })
-  }
-
-  options.mask = !!options.mask
-
-  let errMsg = ''
-  if (!toast.el) {
-    errMsg = toast.create(options, 'loading')
-  } else {
-    errMsg = toast.show(options, 'loading')
-  }
-  return handle.success({ errMsg })
-}
-
-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()
-}
-
-const showModal: typeof Taro.showModal = async (options = {}) => {
-  init(document)
-  options = Object.assign({
-    title: '',
-    content: '',
-    showCancel: true,
-    cancelText: '取消',
-    cancelColor: '#000000',
-    confirmText: '确定',
-    confirmColor: '#3CC51F'
-  }, options)
-  const { success, fail, complete } = options
-  const handle = new MethodHandler({ name: 'showModal', success, fail, complete })
-
-  if (typeof options.title !== 'string') {
-    return handle.fail({
-      errMsg: getParameterError({
-        para: 'title',
-        correct: 'String',
-        wrong: options.title
-      })
-    })
-  }
-
-  if (typeof options.content !== 'string') {
-    return handle.fail({
-      errMsg: getParameterError({
-        para: 'content',
-        correct: 'String',
-        wrong: options.content
-      })
-    })
-  }
-
-  if (typeof options.cancelText !== 'string') {
-    return handle.fail({
-      errMsg: getParameterError({
-        para: 'cancelText',
-        correct: 'String',
-        wrong: options.cancelText
-      })
-    })
-  }
-
-  if (options.cancelText.replace(/[\u0391-\uFFE5]/g, 'aa').length > 8) {
-    return handle.fail({
-      errMsg: 'cancelText length should not larger then 4 Chinese characters'
-    })
-  }
-
-  if (typeof options.confirmText !== 'string') {
-    return handle.fail({
-      errMsg: getParameterError({
-        para: 'confirmText',
-        correct: 'String',
-        wrong: options.confirmText
-      })
-    })
-  }
-
-  if (options.confirmText.replace(/[\u0391-\uFFE5]/g, 'aa').length > 8) {
-    return handle.fail({
-      errMsg: 'confirmText length should not larger then 4 Chinese characters'
-    })
-  }
-
-  if (typeof options.cancelColor !== 'string') {
-    return handle.fail({
-      errMsg: getParameterError({
-        para: 'cancelColor',
-        correct: 'String',
-        wrong: options.cancelColor
-      })
-    })
-  }
-
-  if (typeof options.confirmColor !== 'string') {
-    return handle.fail({
-      errMsg: getParameterError({
-        para: 'confirmColor',
-        correct: 'String',
-        wrong: options.confirmColor
-      })
-    })
-  }
-
-  options.showCancel = !!options.showCancel
-
-  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 () {
-  if (!modal.el) return
-  modal.hide()
-}
-
-const showActionSheet: typeof Taro.showActionSheet = async (options = { itemList: [] }) => {
-  init(document)
-  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 handle.fail({
-      errMsg: getParameterError({
-        para: 'itemList',
-        correct: 'Array',
-        wrong: options.itemList
-      })
-    })
-  }
-
-  if (options.itemList.length < 1) {
-    return handle.fail({ errMsg: 'parameter error: parameter.itemList should have at least 1 item' })
-  }
-
-  if (options.itemList.length > 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 handle.fail({
-        errMsg: getParameterError({
-          para: `itemList[${i}]`,
-          correct: 'String',
-          wrong: options.itemList[i]
-        })
-      })
-    }
-  }
-
-  if (typeof options.itemColor !== 'string') {
-    return handle.fail({
-      errMsg: getParameterError({
-        para: 'itemColor',
-        correct: 'String',
-        wrong: options.itemColor
-      })
-    })
-  }
-
-  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', () => {
-  hideToast()
-  hideLoading()
-  hideModal()
-})
-
-const enableAlertBeforeUnload = temporarilyNotSupport('enableAlertBeforeUnload')
-const disableAlertBeforeUnload = temporarilyNotSupport('disableAlertBeforeUnload')
-
-export { disableAlertBeforeUnload, enableAlertBeforeUnload, hideLoading, hideToast, showActionSheet, showLoading, showModal, showToast }