@tarojs/components 3.5.11 → 3.6.0-beta.1

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/cjs/taro-movable-area-core.cjs.entry.js

@@ -1,157 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7c61bee9.js');
-
-const areaCss = "taro-movable-area-core{display:block;position:relative;width:10px;height:10px}";
-
-let MovableArea = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** 子元素集合 */
-    this.views = [];
-    /** 手势缩放 */
-    this.scaleLength = 0;
-    this.viewsChanged = () => {
-      this.views = [];
-      const elements = this.element.querySelectorAll('taro-movable-view-core');
-      Array.from(elements).forEach((element) => {
-        this.views.push(element);
-      });
-      this.updateArea();
-    };
-    this.handleTouchStart = (e) => {
-      const touches = e.touches;
-      if (!touches || touches.length <= 1) {
-        return;
-      }
-      const gap = {
-        width: touches[1].pageX - touches[0].pageX,
-        height: touches[1].pageY - touches[0].pageY
-      };
-      this.scaleLength = Math.sqrt(gap.width * gap.width + gap.height * gap.height);
-      if (this.scaleArea) {
-        return;
-      }
-      const find = (target, views) => {
-        const loop = (e, t) => {
-          if (!(e = e.parentNode)) {
-            return false;
-          }
-          return (!(e instanceof HTMLElement) || e !== document.body) && (e === t || e === t.element || e.element === t || loop(e, t));
-        };
-        for (let i = 0; i < views.length; i++) {
-          const view = views[i];
-          if (target === view["element"] || loop(target, view)) {
-            return view;
-          }
-        }
-      };
-      const touch1 = find(touches[0].target, this.views);
-      const touch2 = find(touches[1].target, this.views);
-      this.scaleTarget = touch1 && touch1 === touch2 ? touch1 : undefined;
-    };
-    this.handleTouchMove = (e) => {
-      const touches = e.touches;
-      if (!touches || touches.length <= 1) {
-        return;
-      }
-      e.preventDefault();
-      const gap = {
-        width: touches[1].pageX - touches[0].pageX,
-        height: touches[1].pageY - touches[0].pageY
-      };
-      if (this.scaleLength > 0) {
-        this.updateScale(Math.sqrt(gap.width * gap.width + gap.height * gap.height) / this.scaleLength);
-      }
-    };
-    this.handleTouchEnd = (e) => {
-      var _a, _b;
-      if ((e.touches && e.touches.length) || !e.changedTouches) {
-        return;
-      }
-      this.scaleLength = 0;
-      if (this.scaleArea) {
-        this.views.forEach((element) => {
-          var _a;
-          (_a = element["endScale"]) === null || _a === void 0 ? void 0 : _a.call(element);
-        });
-      }
-      else {
-        (_b = (_a = this.scaleTarget) === null || _a === void 0 ? void 0 : _a["endScale"]) === null || _b === void 0 ? void 0 : _b.call(_a);
-      }
-      this.scaleTarget = undefined;
-    };
-    this.updateScale = (scale) => {
-      var _a, _b;
-      if (!scale || scale === 1) {
-        return;
-      }
-      if (this.scaleArea) {
-        this.views.forEach((element) => {
-          var _a;
-          (_a = element["setScale"]) === null || _a === void 0 ? void 0 : _a.call(element, scale);
-        });
-      }
-      else {
-        (_b = (_a = this.scaleTarget) === null || _a === void 0 ? void 0 : _a["setScale"]) === null || _b === void 0 ? void 0 : _b.call(_a, scale);
-      }
-    };
-    this.updateArea = () => {
-      const computedStyle = window.getComputedStyle(this.element);
-      const clientRect = this.element.getBoundingClientRect();
-      const horizontal = ["Left", "Right"].map((e) => {
-        return parseFloat(computedStyle["border" + e + "Width"]) + parseFloat(computedStyle["padding" + e]);
-      });
-      const vertical = ["Top", "Bottom"].map((e) => {
-        return parseFloat(computedStyle["border" + e + "Width"]) + parseFloat(computedStyle["padding" + e]);
-      });
-      this.views.forEach((element) => {
-        var _a;
-        (_a = element["setParent"]) === null || _a === void 0 ? void 0 : _a.call(element, {
-          element: this.element,
-          area: {
-            height: clientRect.height - vertical[0] - vertical[1],
-            width: clientRect.width - horizontal[0] - horizontal[1]
-          }
-        });
-      });
-    };
-  }
-  connectedCallback() {
-    this.observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        var _a, _b;
-        if (mutation.attributeName === "class" || mutation.attributeName === "style") {
-          const offsetWidth = this.element.offsetWidth;
-          const offsetHeight = this.element.offsetHeight;
-          if (offsetWidth !== ((_a = this.offset) === null || _a === void 0 ? void 0 : _a.width) || offsetHeight !== ((_b = this.offset) === null || _b === void 0 ? void 0 : _b.height)) {
-            this.updateArea();
-          }
-          this.offset = {
-            width: offsetWidth,
-            height: offsetHeight
-          };
-        }
-      });
-    });
-    this.observer.observe(this.element, {
-      attributes: true
-    });
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  componentDidLoad() {
-    this.viewsChanged();
-  }
-  render() {
-    return (index.h(index.Host, { onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd }));
-  }
-  get element() { return index.getElement(this); }
-};
-MovableArea.style = areaCss;
-
-exports.taro_movable_area_core = MovableArea;

package/dist/cjs/taro-picker-view-column-core.cjs.entry.js

@@ -1,95 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7c61bee9.js');
-const index$1 = require('./index-47a1959e.js');
-
-const columnCss = ".taro-picker-view-column-container{display:-ms-flexbox;display:flex;overflow:scroll;overflow-x:hidden;position:relative;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;text-align:center}.taro-picker-view-column-container::-webkit-scrollbar{display:none}";
-
-let PickerViewColumn = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.onChange = index.createEvent(this, "onselect", 7);
-    this.onSelectStart = index.createEvent(this, "onselectstart", 7);
-    this.onSelectEnd = index.createEvent(this, "onselectend", 7);
-    // 初始化的选中位置
-    this.initialPosition = '0';
-    // 滑动距离上下留白区域-通过父视图和 indicator 计算而来
-    this.paddingVertical = 0;
-    this.isInit = false;
-    this.isMove = false;
-    // 滚动结束自动回到合适的位置
-    this.handleSelected = index$1.debounce(() => {
-      const childList = this.el.childNodes;
-      let sum = 0;
-      let selectedIndex = '0';
-      for (const index in childList) {
-        const item = childList[index];
-        const itemHeight = item.offsetHeight;
-        if (sum + itemHeight / 2.0 > this.el.scrollTop) {
-          selectedIndex = index;
-          break;
-        }
-        sum += itemHeight;
-      }
-      this.el.scrollTo({
-        top: sum,
-        behavior: 'smooth'
-      });
-      this.onChange.emit({
-        curIndex: this.col,
-        selectedIndex: selectedIndex
-      });
-      this.onSelectEnd.emit();
-    }, 500);
-  }
-  onScroll(_event) {
-    if (!this.isMove) {
-      this.isMove = true;
-      this.onSelectStart.emit();
-    }
-    this.handleSelected();
-  }
-  onMouseEnd() {
-    if (!this.isMove)
-      return;
-    this.isMove = false;
-    this.handleSelected();
-  }
-  onTouchEnd() {
-    this.isMove = false;
-    this.handleSelected();
-  }
-  componentDidUpdate() {
-    if (!this.isInit) {
-      this.isInit = true;
-      const childList = this.el.childNodes;
-      let idx = 0;
-      let sum = 0;
-      for (const index in childList) {
-        const item = childList[index];
-        if (this.initialPosition === index || !item || typeof item.offsetHeight !== 'number') {
-          break;
-        }
-        sum += item.offsetHeight;
-        idx++;
-      }
-      this.el.scrollTo({ top: sum });
-      if (idx >= childList.length) {
-        this.onChange.emit({
-          curIndex: this.col,
-          selectedIndex: idx - 1
-        });
-      }
-    }
-  }
-  render() {
-    const { paddingVertical = 0 } = this;
-    return (index.h(index.Host, { class: "taro-picker-view-column-container", style: { 'padding-top': `${paddingVertical}px`, 'padding-bottom': `${paddingVertical}px` } }));
-  }
-  get el() { return index.getElement(this); }
-};
-PickerViewColumn.style = columnCss;
-
-exports.taro_picker_view_column_core = PickerViewColumn;

package/dist/esm/taro-movable-area-core.entry.js

@@ -1,153 +0,0 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './index-8809c729.js';
-
-const areaCss = "taro-movable-area-core{display:block;position:relative;width:10px;height:10px}";
-
-let MovableArea = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** 子元素集合 */
-    this.views = [];
-    /** 手势缩放 */
-    this.scaleLength = 0;
-    this.viewsChanged = () => {
-      this.views = [];
-      const elements = this.element.querySelectorAll('taro-movable-view-core');
-      Array.from(elements).forEach((element) => {
-        this.views.push(element);
-      });
-      this.updateArea();
-    };
-    this.handleTouchStart = (e) => {
-      const touches = e.touches;
-      if (!touches || touches.length <= 1) {
-        return;
-      }
-      const gap = {
-        width: touches[1].pageX - touches[0].pageX,
-        height: touches[1].pageY - touches[0].pageY
-      };
-      this.scaleLength = Math.sqrt(gap.width * gap.width + gap.height * gap.height);
-      if (this.scaleArea) {
-        return;
-      }
-      const find = (target, views) => {
-        const loop = (e, t) => {
-          if (!(e = e.parentNode)) {
-            return false;
-          }
-          return (!(e instanceof HTMLElement) || e !== document.body) && (e === t || e === t.element || e.element === t || loop(e, t));
-        };
-        for (let i = 0; i < views.length; i++) {
-          const view = views[i];
-          if (target === view["element"] || loop(target, view)) {
-            return view;
-          }
-        }
-      };
-      const touch1 = find(touches[0].target, this.views);
-      const touch2 = find(touches[1].target, this.views);
-      this.scaleTarget = touch1 && touch1 === touch2 ? touch1 : undefined;
-    };
-    this.handleTouchMove = (e) => {
-      const touches = e.touches;
-      if (!touches || touches.length <= 1) {
-        return;
-      }
-      e.preventDefault();
-      const gap = {
-        width: touches[1].pageX - touches[0].pageX,
-        height: touches[1].pageY - touches[0].pageY
-      };
-      if (this.scaleLength > 0) {
-        this.updateScale(Math.sqrt(gap.width * gap.width + gap.height * gap.height) / this.scaleLength);
-      }
-    };
-    this.handleTouchEnd = (e) => {
-      var _a, _b;
-      if ((e.touches && e.touches.length) || !e.changedTouches) {
-        return;
-      }
-      this.scaleLength = 0;
-      if (this.scaleArea) {
-        this.views.forEach((element) => {
-          var _a;
-          (_a = element["endScale"]) === null || _a === void 0 ? void 0 : _a.call(element);
-        });
-      }
-      else {
-        (_b = (_a = this.scaleTarget) === null || _a === void 0 ? void 0 : _a["endScale"]) === null || _b === void 0 ? void 0 : _b.call(_a);
-      }
-      this.scaleTarget = undefined;
-    };
-    this.updateScale = (scale) => {
-      var _a, _b;
-      if (!scale || scale === 1) {
-        return;
-      }
-      if (this.scaleArea) {
-        this.views.forEach((element) => {
-          var _a;
-          (_a = element["setScale"]) === null || _a === void 0 ? void 0 : _a.call(element, scale);
-        });
-      }
-      else {
-        (_b = (_a = this.scaleTarget) === null || _a === void 0 ? void 0 : _a["setScale"]) === null || _b === void 0 ? void 0 : _b.call(_a, scale);
-      }
-    };
-    this.updateArea = () => {
-      const computedStyle = window.getComputedStyle(this.element);
-      const clientRect = this.element.getBoundingClientRect();
-      const horizontal = ["Left", "Right"].map((e) => {
-        return parseFloat(computedStyle["border" + e + "Width"]) + parseFloat(computedStyle["padding" + e]);
-      });
-      const vertical = ["Top", "Bottom"].map((e) => {
-        return parseFloat(computedStyle["border" + e + "Width"]) + parseFloat(computedStyle["padding" + e]);
-      });
-      this.views.forEach((element) => {
-        var _a;
-        (_a = element["setParent"]) === null || _a === void 0 ? void 0 : _a.call(element, {
-          element: this.element,
-          area: {
-            height: clientRect.height - vertical[0] - vertical[1],
-            width: clientRect.width - horizontal[0] - horizontal[1]
-          }
-        });
-      });
-    };
-  }
-  connectedCallback() {
-    this.observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        var _a, _b;
-        if (mutation.attributeName === "class" || mutation.attributeName === "style") {
-          const offsetWidth = this.element.offsetWidth;
-          const offsetHeight = this.element.offsetHeight;
-          if (offsetWidth !== ((_a = this.offset) === null || _a === void 0 ? void 0 : _a.width) || offsetHeight !== ((_b = this.offset) === null || _b === void 0 ? void 0 : _b.height)) {
-            this.updateArea();
-          }
-          this.offset = {
-            width: offsetWidth,
-            height: offsetHeight
-          };
-        }
-      });
-    });
-    this.observer.observe(this.element, {
-      attributes: true
-    });
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  componentDidLoad() {
-    this.viewsChanged();
-  }
-  render() {
-    return (h(Host, { onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd }));
-  }
-  get element() { return getElement(this); }
-};
-MovableArea.style = areaCss;
-
-export { MovableArea as taro_movable_area_core };

package/dist/esm/taro-picker-view-column-core.entry.js

@@ -1,91 +0,0 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-8809c729.js';
-import { d as debounce } from './index-cad8203e.js';
-
-const columnCss = ".taro-picker-view-column-container{display:-ms-flexbox;display:flex;overflow:scroll;overflow-x:hidden;position:relative;-ms-flex-direction:column;flex-direction:column;-ms-flex:1;flex:1;text-align:center}.taro-picker-view-column-container::-webkit-scrollbar{display:none}";
-
-let PickerViewColumn = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.onChange = createEvent(this, "onselect", 7);
-    this.onSelectStart = createEvent(this, "onselectstart", 7);
-    this.onSelectEnd = createEvent(this, "onselectend", 7);
-    // 初始化的选中位置
-    this.initialPosition = '0';
-    // 滑动距离上下留白区域-通过父视图和 indicator 计算而来
-    this.paddingVertical = 0;
-    this.isInit = false;
-    this.isMove = false;
-    // 滚动结束自动回到合适的位置
-    this.handleSelected = debounce(() => {
-      const childList = this.el.childNodes;
-      let sum = 0;
-      let selectedIndex = '0';
-      for (const index in childList) {
-        const item = childList[index];
-        const itemHeight = item.offsetHeight;
-        if (sum + itemHeight / 2.0 > this.el.scrollTop) {
-          selectedIndex = index;
-          break;
-        }
-        sum += itemHeight;
-      }
-      this.el.scrollTo({
-        top: sum,
-        behavior: 'smooth'
-      });
-      this.onChange.emit({
-        curIndex: this.col,
-        selectedIndex: selectedIndex
-      });
-      this.onSelectEnd.emit();
-    }, 500);
-  }
-  onScroll(_event) {
-    if (!this.isMove) {
-      this.isMove = true;
-      this.onSelectStart.emit();
-    }
-    this.handleSelected();
-  }
-  onMouseEnd() {
-    if (!this.isMove)
-      return;
-    this.isMove = false;
-    this.handleSelected();
-  }
-  onTouchEnd() {
-    this.isMove = false;
-    this.handleSelected();
-  }
-  componentDidUpdate() {
-    if (!this.isInit) {
-      this.isInit = true;
-      const childList = this.el.childNodes;
-      let idx = 0;
-      let sum = 0;
-      for (const index in childList) {
-        const item = childList[index];
-        if (this.initialPosition === index || !item || typeof item.offsetHeight !== 'number') {
-          break;
-        }
-        sum += item.offsetHeight;
-        idx++;
-      }
-      this.el.scrollTo({ top: sum });
-      if (idx >= childList.length) {
-        this.onChange.emit({
-          curIndex: this.col,
-          selectedIndex: idx - 1
-        });
-      }
-    }
-  }
-  render() {
-    const { paddingVertical = 0 } = this;
-    return (h(Host, { class: "taro-picker-view-column-container", style: { 'padding-top': `${paddingVertical}px`, 'padding-bottom': `${paddingVertical}px` } }));
-  }
-  get el() { return getElement(this); }
-};
-PickerViewColumn.style = columnCss;
-
-export { PickerViewColumn as taro_picker_view_column_core };