@tarojs/components-advanced 3.6.0-alpha.0

package/dist/components/virtual-list/preset.js

@@ -0,0 +1,166 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import memoizeOne from 'memoize-one';
+import { convertNumber2PX, isCosDistributing } from '../../utils';
+import ListSet from './list-set';
+import { isHorizontalFunc, isRtlFunc } from './utils';
+var INSTANCE_ID = 0;
+var Preset = /*#__PURE__*/function () {
+  function Preset(props, refresh) {
+    _classCallCheck(this, Preset);
+    this.props = props;
+    this.refresh = refresh;
+    _defineProperty(this, "itemList", void 0);
+    _defineProperty(this, "wrapperField", {
+      scrollLeft: 0,
+      scrollTop: 0,
+      scrollHeight: 0,
+      scrollWidth: 0,
+      clientHeight: 0,
+      clientWidth: 0,
+      diffOffset: 0
+    });
+    _defineProperty(this, "diffList", [0, 0, 0]);
+    _defineProperty(this, "getItemStyleCache", memoizeOne(function (_itemSize, _layout, _direction) {
+      // TODO: Cache of item styles, keyed by item index.
+      return {};
+    }));
+    this.init(this.props);
+    this.itemList = new ListSet(props, refresh);
+  }
+  _createClass(Preset, [{
+    key: "init",
+    value: function init(props) {
+      this.props = props;
+    }
+  }, {
+    key: "update",
+    value: function update(props) {
+      this.props = props;
+      this.itemList.update(props);
+    }
+  }, {
+    key: "id",
+    get: function get() {
+      return "virtual-list-".concat(INSTANCE_ID++);
+    }
+  }, {
+    key: "isHorizontal",
+    get: function get() {
+      return isHorizontalFunc(this.props);
+    }
+  }, {
+    key: "isRtl",
+    get: function get() {
+      return isRtlFunc(this.props);
+    }
+  }, {
+    key: "isRelative",
+    get: function get() {
+      return this.props.position === 'relative';
+    }
+  }, {
+    key: "placeholderCount",
+    get: function get() {
+      return this.props.placeholderCount >= 0 ? this.props.placeholderCount : this.props.overscanCount;
+    }
+  }, {
+    key: "outerTagName",
+    get: function get() {
+      return this.props.outerElementType || this.props.outerTagName || 'div';
+    }
+  }, {
+    key: "innerTagName",
+    get: function get() {
+      return this.props.innerElementType || this.props.innerTagName || 'div';
+    }
+  }, {
+    key: "itemTagName",
+    get: function get() {
+      return this.props.itemElementType || this.props.itemTagName || 'div';
+    }
+  }, {
+    key: "field",
+    get: function get() {
+      return this.wrapperField;
+    },
+    set: function set(o) {
+      Object.assign(this.wrapperField, o);
+      // Object.keys(o).forEach(key => {
+      //   if (typeof o[key] === 'number' && typeof this.wrapperField[key] === 'number') {
+      //     this.wrapperField[key] = o[key]
+      //   }
+      // })
+    }
+  }, {
+    key: "isShaking",
+    value: function isShaking(diff) {
+      var list = this.diffList.slice(-3);
+      this.diffList.push(diff);
+      return list.findIndex(function (e) {
+        return Math.abs(e) === Math.abs(diff);
+      }) !== -1 || isCosDistributing(this.diffList.slice(-4));
+    }
+  }, {
+    key: "getItemStyle",
+    value: function getItemStyle(index) {
+      var _this$props = this.props,
+        direction = _this$props.direction,
+        itemSize = _this$props.itemSize,
+        layout = _this$props.layout,
+        shouldResetStyleCacheOnItemSizeChange = _this$props.shouldResetStyleCacheOnItemSizeChange;
+      var itemStyleCache = this.getItemStyleCache(shouldResetStyleCacheOnItemSizeChange ? itemSize : false, shouldResetStyleCacheOnItemSizeChange ? layout : false, shouldResetStyleCacheOnItemSizeChange ? direction : false);
+      var style;
+      var offset = convertNumber2PX(this.itemList.getOffsetSize(index));
+      var size = convertNumber2PX(this.itemList.getSize(index));
+      var isHorizontal = this.isHorizontal;
+      var isRtl = this.isRtl;
+      if (itemStyleCache.hasOwnProperty(index)) {
+        // Note: style is frozen.
+        style = _objectSpread({}, itemStyleCache[index]);
+        if (isHorizontal) {
+          style.width = size;
+          if (!this.isRelative) {
+            if (isRtl) {
+              style.right = offset;
+            } else {
+              style.left = offset;
+            }
+          }
+        } else {
+          style.height = size;
+          if (!this.isRelative) {
+            style.top = offset;
+          }
+        }
+      } else {
+        if (this.isRelative) {
+          itemStyleCache[index] = style = {
+            height: !isHorizontal ? size : '100%',
+            width: isHorizontal ? size : '100%'
+          };
+        } else {
+          var offsetHorizontal = isHorizontal ? offset : 0;
+          itemStyleCache[index] = style = {
+            position: 'absolute',
+            left: !isRtl ? offsetHorizontal : undefined,
+            right: isRtl ? offsetHorizontal : undefined,
+            top: !isHorizontal ? offset : 0,
+            height: !isHorizontal ? size : '100%',
+            width: isHorizontal ? size : '100%'
+          };
+        }
+      }
+      for (var k in style) {
+        if (style.hasOwnProperty(k)) {
+          style[k] = convertNumber2PX(style[k]);
+        }
+      }
+      return style;
+    }
+  }]);
+  return Preset;
+}();
+export { Preset as default };

package/dist/components/virtual-list/react/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { VirtualListProps } from '../';
+declare const VirtualList: React.ForwardRefExoticComponent<Pick<VirtualListProps, "id" | "className" | "style" | "key" | "hidden" | "animation" | "dangerouslySetInnerHTML" | "onTouchStart" | "onTouchMove" | "onTouchCancel" | "onTouchEnd" | "onClick" | "onLongPress" | "onLongClick" | "onTransitionEnd" | "onAnimationStart" | "onAnimationIteration" | "onAnimationEnd" | "onTouchForceChange" | "height" | "width" | "item" | "itemCount" | "itemData" | "itemSize" | "unlimitedSize" | "position" | "initialScrollOffset" | "innerElementType" | "renderTop" | "renderBottom" | "layout" | "onScroll" | "onScrollNative" | "overscanCount" | "placeholderCount" | "useIsScrolling"> & React.RefAttributes<unknown>>;
+export default VirtualList;

package/dist/components/virtual-list/react/index.js

@@ -0,0 +1,67 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style", "onScroll", "onScrollNative", "layout"],
+  _excluded2 = ["direction", "innerElementType", "itemElementType", "initialScrollOffset", "overscanCount"];
+import { ScrollView, View } from '@tarojs/components';
+import React from 'react';
+import { convertPX2Int } from '../../../utils/convert';
+import List from './list';
+var OuterScrollView = React.forwardRef(function OuterScrollView(props, ref) {
+  var _ref = props,
+    style = _ref.style,
+    onScroll = _ref.onScroll,
+    onScrollNative = _ref.onScrollNative,
+    layout = _ref.layout,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var handleScroll = function handleScroll(event) {
+    onScroll(_objectSpread(_objectSpread({}, event), {}, {
+      currentTarget: _objectSpread(_objectSpread({}, event.detail), {}, {
+        clientWidth: convertPX2Int(style.width),
+        clientHeight: convertPX2Int(style.height)
+      })
+    }));
+    if (typeof onScrollNative === 'function') {
+      onScrollNative(event);
+    }
+  };
+  return React.createElement(ScrollView, _objectSpread({
+    ref: ref,
+    style: style,
+    scrollY: layout === 'vertical',
+    scrollX: layout === 'horizontal',
+    onScroll: handleScroll
+  }, rest));
+});
+var VirtualList = React.forwardRef(function VirtualList(props, ref) {
+  var _ref2 = props,
+    _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? 'ltr' : _ref2$direction,
+    _ref2$innerElementTyp = _ref2.innerElementType,
+    innerElementType = _ref2$innerElementTyp === void 0 ? View : _ref2$innerElementTyp,
+    _ref2$itemElementType = _ref2.itemElementType,
+    itemElementType = _ref2$itemElementType === void 0 ? View : _ref2$itemElementType,
+    _ref2$initialScrollOf = _ref2.initialScrollOffset,
+    initialScrollOffset = _ref2$initialScrollOf === void 0 ? 0 : _ref2$initialScrollOf,
+    _ref2$overscanCount = _ref2.overscanCount,
+    overscanCount = _ref2$overscanCount === void 0 ? 1 : _ref2$overscanCount,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  if ('children' in rest) {
+    console.warn('Taro(VirtualList): children props have been deprecated. ' + 'Please use the item props instead.');
+    rest.item = rest.children;
+  }
+  if (rest.item instanceof Array) {
+    console.warn('Taro(VirtualList): item should not be an array');
+    rest.item = rest.item[0];
+  }
+  return React.createElement(List, _objectSpread(_objectSpread({
+    ref: ref
+  }, rest), {}, {
+    itemElementType: itemElementType,
+    innerElementType: innerElementType,
+    outerElementType: OuterScrollView,
+    direction: direction,
+    initialScrollOffset: initialScrollOffset,
+    overscanCount: overscanCount
+  }));
+});
+export default VirtualList;

package/dist/components/virtual-list/react/list.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import ListSet from '../list-set';
+import Preset from '../preset';
+import type { IProps } from '../preset';
+export interface IState {
+    id: string;
+    instance: List;
+    isScrolling: boolean;
+    scrollDirection: 'forward' | 'backward';
+    scrollOffset: number;
+    scrollUpdateWasRequested: boolean;
+    refreshCount: number;
+}
+export default class List extends React.PureComponent<IProps, IState> {
+    static defaultProps: IProps;
+    static getDerivedStateFromProps(nextProps: IProps, prevState: IState): any;
+    itemList: ListSet;
+    preset: Preset;
+    constructor(props: IProps);
+    refresh: () => void;
+    _outerRef: any;
+    _resetIsScrollingTimeoutId: any;
+    _callOnItemsRendered: import("memoize-one").MemoizedFn<(this: any, overscanStartIndex: any, overscanStopIndex: any, visibleStartIndex: any, visibleStopIndex: any) => any>;
+    _callOnScroll: import("memoize-one").MemoizedFn<(this: any, scrollDirection: any, scrollOffset: any, scrollUpdateWasRequested: any, detail: any) => void>;
+    _callPropsCallbacks(prevProps?: any, prevState?: any): void;
+    _getSizeUploadSync: (index: number, isHorizontal: boolean) => Promise<unknown>;
+    _getRangeToRender(): number[];
+    _onScrollHorizontal: (event: any) => void;
+    _onScrollVertical: (event: any) => void;
+    _outerRefSetter: (ref: any) => void;
+    _resetIsScrollingDebounced: () => void;
+    _resetIsScrolling: () => void;
+    scrollTo(scrollOffset: number): void;
+    scrollToItem(index: number, align?: string): void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: IProps, prevState: IState): void;
+    componentWillUnmount(): void;
+    render(): React.ReactElement<{}, string | React.JSXElementConstructor<any>>;
+}