@tarojs/components 3.6.0-canary.1 → 3.6.0-canary.10

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,4 @@
-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
-}
+const VirtualList = require('@tarojs/components-advanced/dist/components/virtual-list/index.js')
+
+module.exports = VirtualList
+module.exports.default = VirtualList.default

package/dist/taro-components/p-057159bc.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/button/style/index.scss?tag=taro-button-core","src/components/button/button.tsx"],"names":["indexCss","Button","exports","class_1","prototype","onTouchStart","_this","this","disabled","touch","hoverClass","setTimeout","hover","hoverStartTime","onTouchEnd","hoverStayTime","formType","onSubmit","emit","onReset","render","_b","type","size","plain","loading","cls","classNames","_a","concat","h","Host","class"],"mappings":"gNAAA,IAAMA,EAAW,+1GCOJC,EAAMC,EAAA,mBAAA,+JAEI,yBACN,uBACU,sBACD,yDAGN,oBAC6C,gBAI9C,iBACA,MAWjBC,EAAAC,UAAAC,aAAA,WAAA,IAAAC,EAAAC,KACE,GAAIA,KAAKC,SAAU,CACjB,OAGFD,KAAKE,MAAQ,KACb,GAAIF,KAAKG,aAAeH,KAAKC,SAAU,CACrCG,YAAW,WACT,GAAIL,EAAKG,MAAO,CACdH,EAAKM,MAAQ,QAEdL,KAAKM,kBAKZV,EAAAC,UAAAU,WAAA,WAAA,IAAAR,EAAAC,KACE,GAAIA,KAAKC,SAAU,CACjB,OAGFD,KAAKE,MAAQ,MACb,GAAIF,KAAKG,aAAeH,KAAKC,SAAU,CACrCG,YAAW,WACT,IAAKL,EAAKG,MAAO,CACfH,EAAKM,MAAQ,SAEdL,KAAKQ,eAGV,GAAIR,KAAKS,WAAa,SAAU,CAC9BT,KAAKU,SAASC,YACT,GAAIX,KAAKS,WAAa,QAAS,CACpCT,KAAKY,QAAQD,SAIjBf,EAAAC,UAAAgB,OAAA,iBACQ,IAAAC,EAQFd,KAPFC,EAAQa,EAAAb,SACRE,EAAUW,EAAAX,WACVY,EAAID,EAAAC,KACJC,EAAIF,EAAAE,KACJC,EAAKH,EAAAG,MACLC,EAAOJ,EAAAI,QACPb,EAAKS,EAAAT,MAGP,IAAMc,EAAMC,GAAUC,EAAA,GACpBA,EAAC,GAAAC,OAAGnB,IAAeE,IAAUJ,MAG/B,OACEsB,EAACC,EAAI,CACHC,MAAON,EACPJ,KAAMA,EACNE,MAAOA,EACPC,QAASA,EACTF,KAAMA,EACNf,SAAUA,GAETiB,GAAWK,EAAA,IAAA,CAAGE,MAAM,iBACrBF,EAAA,OAAA,6HAvFW","sourcesContent":["$weuiBtnHeight: 46px;\n$weuiBtnFontSize: 18px;\n$weuiBtnFontColor: #fff;\n$weuiBtnActiveFontColor: rgb(255 255 255 / 60%);\n$weuiBtnDisabledFontColor: rgb(255 255 255 / 60%);\n$weuiBtnBorderRadius: 5px;\n$weuiBtnDefaultGap: 15px;\n\n// Button Mini\n$weuiBtnMiniFontSize: 13px;\n$weuiBtnMiniHeight: 2.3;\n\n// Button Default\n$weuiBtnDefaultFontColor: #000;\n$weuiBtnDefaultActiveFontColor: rgb(0 0 0 / 60%);\n$weuiBtnDefaultDisabledFontColor: rgb(0 0 0 / 30%);\n$weuiBtnDefaultBg: #f8f8f8;\n$weuiBtnDefaultActiveBg: #dedede;\n$weuiBtnDefaultDisabledBg: #f7f7f7;\n\n// Button Primary\n$weuiBtnPrimaryBg: #1aad19;\n$weuiBtnPrimaryActiveBg: #179b16;\n$weuiBtnPrimaryDisabledBg: #9ed99d;\n\n// Button Warn\n$weuiBtnWarnBg: #e64340;\n$weuiBtnWarnActiveBg: #ce3c39;\n$weuiBtnWarnDisabledBg: #ec8b89;\n\n// Button Plain Primary\n$weuiBtnPlainPrimaryColor: rgb(26 173 25 / 100%);\n$weuiBtnPlainPrimaryBorderColor: rgb(26 173 25 / 100%);\n$weuiBtnPlainPrimaryActiveColor: rgb(26 173 25 / 60%);\n$weuiBtnPlainPrimaryActiveBorderColor: rgb(26 173 25 / 60%);\n\n// Button Plain Default\n$weuiBtnPlainDefaultColor: rgb(53 53 53 / 100%);\n$weuiBtnPlainDefaultBorderColor: rgb(53 53 53 / 100%);\n$weuiBtnPlainDefaultActiveColor: rgb(53 53 53 / 60%);\n$weuiBtnPlainDefaultActiveBorderColor: rgb(53 53 53 / 60%);\n\ntaro-button-core {\n  display: block;\n  overflow: hidden;\n  position: relative;\n  box-sizing: border-box;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: 14px;\n  padding-right: 14px;\n  border-width: 0;\n  border-radius: $weuiBtnBorderRadius;\n  width: 100%;\n  appearance: none;\n  outline: 0;\n  background-color: $weuiBtnDefaultBg;\n  line-height: 2.55555556;\n  text-decoration: none;\n  text-align: center;\n  font-size: $weuiBtnFontSize;\n  color: $weuiBtnDefaultFontColor;\n  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);\n\n  &:focus {\n    outline: 0;\n  }\n\n  &:not([disabled]):active {\n    background-color: $weuiBtnDefaultActiveBg;\n    color: $weuiBtnDefaultActiveFontColor;\n  }\n\n  &::after {\n    position: absolute;\n    left: 0;\n    top: 0;\n    box-sizing: border-box;\n    border: 1px solid rgb(0 0 0 / 20%);\n    border-radius: $weuiBtnBorderRadius * 2;\n    width: 200%;\n    height: 200%;\n    content: \" \";\n    transform: scale(0.5);\n    transform-origin: 0 0;\n  }\n\n  & + & {\n    margin-top: $weuiBtnDefaultGap;\n  }\n\n  &[type=\"default\"] {\n    background-color: $weuiBtnDefaultBg;\n    color: $weuiBtnDefaultFontColor;\n\n    &:not([disabled]):visited {\n      color: $weuiBtnDefaultFontColor;\n    }\n\n    &:not([disabled]):active {\n      background-color: $weuiBtnDefaultActiveBg;\n      color: $weuiBtnDefaultActiveFontColor;\n    }\n  }\n\n  &[size=\"mini\"] {\n    display: inline-block;\n    padding: 0 1.32em;\n    width: auto;\n    line-height: $weuiBtnMiniHeight;\n    font-size: $weuiBtnMiniFontSize;\n  }\n\n  &[plain],\n  &[plain][type=\"default\"],\n  &[plain][type=\"primary\"] {\n    border-width: 1px;\n    background-color: transparent;\n  }\n\n  &[disabled] {\n    color: $weuiBtnDisabledFontColor;\n\n    &[type=\"default\"] {\n      background-color: $weuiBtnDefaultDisabledBg;\n      color: $weuiBtnDefaultDisabledFontColor;\n    }\n\n    &[type=\"primary\"] {\n      background-color: $weuiBtnPrimaryDisabledBg;\n    }\n\n    &[type=\"warn\"] {\n      background-color: $weuiBtnWarnDisabledBg;\n    }\n  }\n\n  &[loading] {\n    .weui-loading {\n      margin: -0.2em 0.34em 0 0;\n    }\n\n    &[type=\"primary\"],\n    &[type=\"warn\"] {\n      color: $weuiBtnActiveFontColor;\n    }\n\n    &[type=\"primary\"] {\n      background-color: $weuiBtnPrimaryActiveBg;\n    }\n\n    &[type=\"warn\"] {\n      background-color: $weuiBtnWarnActiveBg;\n    }\n  }\n\n  &[plain][type=\"primary\"] {\n    border: 1px solid $weuiBtnPlainPrimaryBorderColor;\n    color: $weuiBtnPlainPrimaryColor;\n\n    &:not([disabled]):active {\n      border-color: $weuiBtnPlainPrimaryActiveBorderColor;\n      background-color: transparent;\n      color: $weuiBtnPlainPrimaryActiveColor;\n    }\n\n    &::after {\n      border-width: 0;\n    }\n  }\n\n  &[plain],\n  &[plain][type=\"default\"] {\n    border: 1px solid $weuiBtnPlainDefaultBorderColor;\n    color: $weuiBtnPlainDefaultColor;\n\n    &:not([disabled]):active {\n      border-color: $weuiBtnPlainDefaultActiveBorderColor;\n      background-color: transparent;\n      color: $weuiBtnPlainDefaultActiveColor;\n    }\n\n    &::after {\n      border-width: 0;\n    }\n  }\n\n  &[type=\"primary\"] {\n    background-color: $weuiBtnPrimaryBg;\n    color: #fff;\n\n    &:not([disabled]):visited {\n      color: $weuiBtnFontColor;\n    }\n\n    &:not([disabled]):active {\n      background-color: $weuiBtnPrimaryActiveBg;\n      color: $weuiBtnActiveFontColor;\n    }\n  }\n\n  &[type=\"warn\"] {\n    background-color: $weuiBtnWarnBg;\n    color: #fff;\n\n    &:not([disabled]):visited {\n      color: $weuiBtnFontColor;\n    }\n\n    &:not([disabled]):active {\n      background-color: $weuiBtnWarnActiveBg;\n      color: $weuiBtnActiveFontColor;\n    }\n  }\n\n  &[plain][disabled] {\n    border: 1px solid rgb(0 0 0 / 20%);\n    background-color: #f7f7f7;\n    color: rgb(0 0 0 / 30%);\n  }\n\n  &[plain][disabled][type=\"primary\"] {\n    border: 1px solid rgb(0 0 0 / 20%);\n    background-color: #f7f7f7;\n    color: rgb(0 0 0 / 30%);\n  }\n}\n","import { Component, h, Prop, State, ComponentInterface, Event, EventEmitter, Listen, Element, Host } from '@stencil/core'\nimport classNames from 'classnames'\n\n@Component({\n  tag: 'taro-button-core',\n  styleUrl: './style/index.scss'\n})\nexport class Button implements ComponentInterface {\n  @Prop() disabled: boolean\n  @Prop() hoverClass = 'button-hover'\n  @Prop() type = ''\n  @Prop() hoverStartTime = 20\n  @Prop() hoverStayTime = 70\n  @Prop() size: string\n  @Prop() plain: boolean\n  @Prop() loading = false\n  @Prop({ reflect: true }) formType: 'submit' | 'reset' | null = null\n\n  @Element() el: HTMLElement\n\n  @State() hover = false\n  @State() touch = false\n\n  @Event({\n    eventName: 'tarobuttonsubmit'\n  }) onSubmit: EventEmitter\n\n  @Event({\n    eventName: 'tarobuttonreset'\n  }) onReset: EventEmitter\n\n  @Listen('touchstart')\n  onTouchStart () {\n    if (this.disabled) {\n      return\n    }\n\n    this.touch = true\n    if (this.hoverClass && !this.disabled) {\n      setTimeout(() => {\n        if (this.touch) {\n          this.hover = true\n        }\n      }, this.hoverStartTime)\n    }\n  }\n\n  @Listen('touchend')\n  onTouchEnd () {\n    if (this.disabled) {\n      return\n    }\n\n    this.touch = false\n    if (this.hoverClass && !this.disabled) {\n      setTimeout(() => {\n        if (!this.touch) {\n          this.hover = false\n        }\n      }, this.hoverStayTime)\n    }\n\n    if (this.formType === 'submit') {\n      this.onSubmit.emit()\n    } else if (this.formType === 'reset') {\n      this.onReset.emit()\n    }\n  }\n\n  render () {\n    const {\n      disabled,\n      hoverClass,\n      type,\n      size,\n      plain,\n      loading,\n      hover\n    } = this\n\n    const cls = classNames({\n      [`${hoverClass}`]: hover && !disabled\n    })\n\n    return (\n      <Host\n        class={cls}\n        type={type}\n        plain={plain}\n        loading={loading}\n        size={size}\n        disabled={disabled}\n      >\n        {loading && <i class='weui-loading' />}\n        <slot />\n      </Host>\n    )\n  }\n}\n"]}