@tarojs/components 3.6.0-canary.5 → 3.6.0-canary.7

package/types/Text.d.ts

@@ -45,7 +45,7 @@ declare namespace TextProps {
 
 /** 文本
  * @classification base
- * @supported weapp, swan, alipay, tt, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
  * @example_react
  * ```tsx
  * export default class PageView extends Component {

package/types/Textarea.d.ts

@@ -136,6 +136,12 @@ interface TextareaProps extends StandardProps, FormItemProps {
    */
   controlled?: string
 
+  /** 使用原生键盘
+   * @default false
+   * @supported alipay
+   */
+  enableNative?: boolean
+
   /** 无障碍访问，（属性）元素的额外描述
    * @supported qq
    */
@@ -218,7 +224,7 @@ declare namespace TextareaProps {
 
 /** 多行输入框。该组件是原生组件，使用时请注意相关限制
  * @classification forms
- * @supported weapp, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, h5, rn
  * @example_react
  * ```tsx
  * export default class PageView extends Component {

package/types/Video.d.ts

@@ -282,6 +282,12 @@ interface VideoProps extends StandardProps {
    */
   mobilenetHintType?: string
 
+  /** 使用原生
+   * @default true
+   * @supported alipay
+   */
+  enableNative?: boolean
+
   /** 浮窗设置。暂时不支持全局浮窗。
    * 可选值：
    *
@@ -637,7 +643,7 @@ declare namespace VideoProps {
 
 /** 视频。相关api：Taro.createVideoContext
  * @classification media
- * @supported weapp, swan, alipay, tt, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
  * @example_react
  * ```tsx
  * export default class PageView extends Component {

package/types/View.d.ts

@@ -142,7 +142,7 @@ interface ViewProps extends StandardProps {
 
 /** 视图容器
  * @classification viewContainer
- * @supported weapp, swan, alipay, tt, h5, rn
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
  * @example_react
  * ```tsx
  * export default class PageView extends Component {

package/types/WebView.d.ts

@@ -49,7 +49,7 @@ declare namespace WebViewProps {
 
 /** web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
  * @classification open
- * @supported weapp, h5, rn, tt
+ * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
  * @example_react
  * ```tsx
  * class App extends Component {

package/types/index.vue3.d.ts

@@ -282,7 +282,8 @@ declare global {
 
       'custom-wrapper': ElementAttrs<TransformReact2VueType<CustomWrapperProps>>
       'taro-custom-wrapper-core': ElementAttrs<TransformReact2VueType<CustomWrapperProps>>
-      'slot': ElementAttrs<TransformReact2VueType<SlotProps>>
+      /** 为了不与vue3模板默认的slot冲突，增加 Record<string, any> */
+      'slot': ElementAttrs<TransformReact2VueType<SlotProps>> & Record<string, any>
       'taro-slot-core': ElementAttrs<TransformReact2VueType<SlotProps>>
     }
   }

package/virtual-list/index.d.ts

@@ -1,121 +1,4 @@
-import { Component, ComponentType, CSSProperties, ReactNode } from 'react'
-import { StandardProps, BaseEventOrigFunction } from '../types/common'
-import { ScrollViewProps } from '../types/ScrollView'
+import VirtualList from '@tarojs/components-advanced/dist/components/virtual-list/index'
 
-interface VirtualListProps extends StandardProps {
-  /** 列表的高度。 */
-  height: string | number
-  /** 列表的宽度。 */
-  width: string | number
-  /** 列表的长度 */
-  itemCount: number
-  /** 渲染数据 */
-  itemData: any[]
-  /** 列表单项的大小，垂直滚动时为高度，水平滚动时为宽度。 */
-  itemSize: number
-  /** 解开高度列表单项大小限制，默认值使用: itemSize (请注意，初始高度与实际高度差异过大会导致隐患)。 */
-  unlimitedSize?: boolean
-  /** 布局方式，默认采用 "absolute" */
-  position?: 'absolute' | 'relative'
-  /** 初始滚动偏移值，水平滚动影响 scrollLeft，垂直滚动影响 scrollTop。 */
-  initialScrollOffset?: number
-  /** 列表内部容器组件类型，默认值为 View。 */
-  innerElementType?: ComponentType
-  /** 底部区域 */
-  renderBottom?: ReactNode
-  /** 滚动方向。vertical 为垂直滚动，horizontal 为平行滚动。默认为 vertical。 */
-  layout?: 'vertical' | 'horizontal'
-  /** 列表滚动时调用函数 */
-  onScroll?: (event: VirtualListEvent<VirtualListProps.onScrollDetail>) => void
-  /** 调用平台原生的滚动监听函数。 */
-  onScrollNative?: BaseEventOrigFunction<ScrollViewProps.onScrollDetail>
-  /** 在可视区域之外渲染的列表单项数量，值设置得越高，快速滚动时出现白屏的概率就越小，相应地，每次滚动的性能会变得越差。 */
-  overscanCount?: number
-  /** 是否注入 isScrolling 属性到 children 组件。这个参数一般用于实现滚动骨架屏（或其它 placeholder） 时比较有用。 */
-  useIsScrolling?: boolean
-  children?: ComponentType<{
-    /** 组件 ID */
-    id: string
-    /** 单项的样式，样式必须传入组件的 style 中 */
-    style?: CSSProperties
-    /** 组件渲染的数据 */
-    data: any
-    /** 组件渲染数据的索引 */
-    index: number
-    /** 组件是否正在滚动，当 useIsScrolling 值为 true 时返回布尔值，否则返回 undefined */
-    isScrolling?: boolean
-  }>
-}
-
-declare namespace VirtualListProps {
-  // eslint-disable-next-line @typescript-eslint/class-name-casing
-  interface onScrollDetail {
-    clientWidth: number
-    clientHeight: number
-  }
-}
-
-interface VirtualListEvent<T> {
-  /** 滚动方向，可能值为 forward 往前， backward 往后。 */
-  scrollDirection: 'forward' | 'backward'
-  /** 滚动距离 */
-  scrollOffset: number
-  /** 当滚动是由 scrollTo() 或 scrollToItem() 调用时返回 true，否则返回 false */
-  scrollUpdateWasRequested: boolean
-  /** 当前只有 React 支持 */
-  detail?: {
-    scrollLeft: number
-    scrollTop: number
-    scrollHeight: number
-    scrollWidth: number
-    clientWidth: number
-    clientHeight: number
-  }
-}
-
-/**
- * @classification viewContainer
- * @supported weapp, swan, alipay, tt, qq, jd, h5
- * @example
- * ```tsx
- * import VirtualList from `@tarojs/components/virtual-list`
- *
- * function buildData (offset = 0) {
- *   return Array(100).fill(0).map((_, i) => i + offset);
- * }
- *
- * const Row = React.memo(({ id, index, style, data }) => {
- *   return (
- *     <View id={id} className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
- *       Row {index}
- *     </View>
- *   );
- * })
- *
- * export default class Index extends Component {
- *   state = {
- *     data: buildData(0),
- *   }
- *
- *   render() {
- *     const { data } = this.state
- *     const dataLen = data.length
- *     return (
- *       <VirtualList
- *         height={500} // 列表的高度
- *         width='100%' // 列表的宽度
- *         itemData={data} // 渲染列表的数据
- *         itemCount={dataLen} // 渲染列表的长度
- *         itemSize={100} // 列表单项的高度
- *       >
- *         {Row} // 列表单项组件，这里只能传入一个组件
- *       </VirtualList>
- *     );
- *   }
- * }
- * ```
- * @see https://taro-docs.jd.com/taro/docs/virtual-list/
- */
-declare class VirtualList extends Component<VirtualListProps> {}
-
-export = VirtualList
+export * from '@tarojs/components-advanced/dist/components/virtual-list/index'
+export default VirtualList

package/virtual-list/index.js

@@ -1,7 +1,3 @@
-if (process.env.FRAMEWORK === 'vue') {
-  module.exports = require('./vue').default
-  module.exports.default = module.exports
-} else {
-  module.exports = require('./react').default
-  module.exports.default = module.exports
-}
+module.exports = require('@tarojs/components-advanced/dist/components/virtual-list/index.js').default
+
+module.exports.default = module.exports

package/virtual-list/domHelpers.js

@@ -1,40 +0,0 @@
-let cachedRTLResult = null // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
-// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
-// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
-// The safest way to check this is to intentionally set a negative offset,
-// and then verify that the subsequent "scroll" event matches the negative offset.
-// If it does not match, then we can assume a non-standard RTL scroll implementation.
-
-export function getRTLOffsetType (recalculate = false) {
-  if (cachedRTLResult === null || recalculate) {
-    const outerDiv = document.createElement('div')
-    const outerStyle = outerDiv.style
-    outerStyle.width = '50px'
-    outerStyle.height = '50px'
-    outerStyle.overflow = 'scroll'
-    outerStyle.direction = 'rtl'
-    const innerDiv = document.createElement('div')
-    const innerStyle = innerDiv.style
-    innerStyle.width = '100px'
-    innerStyle.height = '100px'
-    outerDiv.appendChild(innerDiv)
-    document.body.appendChild(outerDiv)
-
-    if (outerDiv.scrollLeft > 0) {
-      cachedRTLResult = 'positive-descending'
-    } else {
-      outerDiv.scrollLeft = 1
-
-      if (outerDiv.scrollLeft === 0) {
-        cachedRTLResult = 'negative'
-      } else {
-        cachedRTLResult = 'positive-ascending'
-      }
-    }
-
-    document.body.removeChild(outerDiv)
-    return cachedRTLResult
-  }
-
-  return cachedRTLResult
-}

package/virtual-list/memoize.js

@@ -1,38 +0,0 @@
-// https://github.com/alexreardon/memoize-one#readme
-
-function areInputsEqual (newInputs, lastInputs) {
-  if (newInputs.length !== lastInputs.length) {
-    return false
-  }
-  for (let i = 0; i < newInputs.length; i++) {
-    if (newInputs[i] !== lastInputs[i]) {
-      return false
-    }
-  }
-  return true
-}
-
-export function memoizeOne (resultFn, isEqual) {
-  // eslint-disable-next-line no-void
-  if (isEqual === void 0) { isEqual = areInputsEqual }
-  let lastThis
-  let lastArgs = []
-  let lastResult
-  let calledOnce = false
-  function memoized () {
-    const newArgs = []
-    for (let _i = 0; _i < arguments.length; _i++) {
-      newArgs[_i] = arguments[_i]
-    }
-    if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
-      return lastResult
-    }
-    lastResult = resultFn.apply(this, newArgs)
-    calledOnce = true
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    lastThis = this
-    lastArgs = newArgs
-    return lastResult
-  }
-  return memoized
-}

package/virtual-list/react/FixedSizeList.js

@@ -1,193 +0,0 @@
-import createListComponent, { isHorizontalFunc } from './createListComponent'
-
-let devWarningsDirection = null
-let devWarningsTagName = null
-
-if (process.env.NODE_ENV !== 'production') {
-  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
-    devWarningsDirection =
-      /* #__PURE__ */
-      new WeakSet()
-    devWarningsTagName =
-      /* #__PURE__ */
-      new WeakSet()
-  }
-}
-
-const validateSharedProps = ({
-  children,
-  direction,
-  height,
-  layout,
-  itemTagName,
-  innerTagName,
-  outerTagName,
-  width
-}, {
-  instance
-}) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (innerTagName != null || outerTagName != null || itemTagName != null) {
-      if (devWarningsTagName && !devWarningsTagName.has(instance)) {
-        devWarningsTagName.add(instance)
-        console.warn('The itemTagName、innerTagName and outerTagName props have been deprecated. ' + 'Please use the itemElementType、innerElementType and outerElementType props instead.')
-      }
-    } // TODO Deprecate direction "horizontal"
-
-    const isHorizontal = direction === 'horizontal' || layout === 'horizontal'
-
-    switch (direction) {
-      case 'horizontal':
-      case 'vertical':
-        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
-          devWarningsDirection.add(instance)
-          console.warn('The direction prop should be either "ltr" (default) or "rtl". ' + 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.')
-        }
-
-        break
-
-      case 'ltr':
-      case 'rtl':
-        // Valid values
-        break
-
-      default:
-        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + `"${direction}" was specified.`)
-    }
-
-    switch (layout) {
-      case 'horizontal':
-      case 'vertical':
-        // Valid values
-        break
-
-      default:
-        throw Error('An invalid "layout" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + `"${layout}" was specified.`)
-    }
-
-    if (children == null) {
-      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + `"${children === null ? 'null' : typeof children}" was specified.`)
-    }
-
-    if (isHorizontal && typeof width !== 'number') {
-      throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + `"${width === null ? 'null' : typeof width}" was specified.`)
-    } else if (!isHorizontal && typeof height !== 'number') {
-      throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + `"${height === null ? 'null' : typeof height}" was specified.`)
-    }
-  }
-}
-
-const FixedSizeList =
-/* #__PURE__ */
-createListComponent({
-  getItemOffset (props, index, ref) {
-    if (!props.unlimitedSize) {
-      return index * props.itemSize
-    }
-    return ref._getCountSize(props, index)
-  },
-  getItemSize (props, index, ref) {
-    if (!props.unlimitedSize) {
-      return props.itemSize
-    }
-
-    return ref._getSizeUpload(index, isHorizontalFunc(props))
-  },
-  getEstimatedTotalSize (props, ref) {
-    return ref._getCountSize(props, props.itemCount)
-  },
-  getOffsetForIndexAndAlignment: (props, id, index, align, scrollOffset, ref) => {
-    const { height, width } = props
-    const { sizeList } = ref.state
-    // TODO Deprecate direction "horizontal"
-    const size = isHorizontalFunc(props) ? width : height
-    const itemSize = ref._getSize(sizeList[index])
-    const lastItemOffset = Math.max(0, ref._getCountSize(props, props.itemCount) - size)
-    const maxOffset = Math.min(lastItemOffset, ref._getCountSize(props, index))
-    const minOffset = Math.max(0, ref._getCountSize(props, index) - size + itemSize)
-
-    if (align === 'smart') {
-      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
-        align = 'auto'
-      } else {
-        align = 'center'
-      }
-    }
-
-    switch (align) {
-      case 'start':
-        return maxOffset
-
-      case 'end':
-        return minOffset
-
-      case 'center':
-      {
-        // "Centered" offset is usually the average of the min and max.
-        // But near the edges of the list, this doesn't hold true.
-        const middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2)
-
-        if (middleOffset < Math.ceil(size / 2)) {
-          return 0 // near the beginning
-        } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
-          return lastItemOffset // near the end
-        } else {
-          return middleOffset
-        }
-      }
-
-      case 'auto':
-      default:
-        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
-          return scrollOffset
-        } else if (scrollOffset < minOffset) {
-          return minOffset
-        } else {
-          return maxOffset
-        }
-    }
-  },
-  getStartIndexForOffset (props, scrollOffset, ref) {
-    return Math.max(0, ref._getSizeCount(props, scrollOffset) - 1)
-  },
-  getStopIndexForStartIndex (props, scrollOffset, startIndex, ref) {
-    const {
-      height,
-      itemCount,
-      itemSize,
-      width
-    } = props
-    const size = isHorizontalFunc(props) ? width : height
-    const offset = ref._getCountSize(props, startIndex)
-    if (!props.unlimitedSize) {
-      // TODO Deprecate direction "horizontal"
-      const numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize)
-      /** -1 is because stop index is inclusive */
-      return Math.max(startIndex, Math.min(itemCount - 1, startIndex + numVisibleItems - 1))
-    }
-    return Math.max(startIndex, Math.min(itemCount - 1, ref._getSizeCount(props, size + scrollOffset)))
-  },
-
-  initInstanceProps () { // Noop
-  },
-
-  shouldResetStyleCacheOnItemSizeChange: true,
-  validateProps: (nextProps, prevState) => {
-    const { itemCount, itemSize } = nextProps
-    const { sizeList } = prevState
-    if (itemCount > sizeList.length) {
-      const arr = new Array(itemCount - sizeList.length).fill(-1)
-      sizeList.push(...arr)
-    } else if (itemCount < sizeList.length) {
-      sizeList.length = itemCount
-    }
-    if (process.env.NODE_ENV !== 'production') {
-      if (typeof itemSize !== 'number') {
-        throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number. ' + `"${itemSize === null ? 'null' : typeof itemSize}" was specified.`)
-      }
-    }
-    validateSharedProps(nextProps, prevState)
-  }
-})
-
-export default FixedSizeList