pixuireactcomponents 1.5.24 → 1.5.26

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.5.24",
+    "version": "1.5.26",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

package/src/components/react/app/button/Button.d.ts

@@ -5,6 +5,7 @@ interface ButtonProps {
     text: string;
     onClick: Function;
     disabled?: boolean;
+    children?: any;
 }
 export declare let Button: (props: ButtonProps) => h.JSX.Element;
 export {};

package/src/components/react/app/virtualList/VirtualList.d.ts

@@ -0,0 +1,116 @@
+import { h, Component, JSX } from 'preact';
+interface VirtualListScrollProps {
+    /**
+     * 滚动回弹类型, 具体表现为是否可以拖动超过内容大小值
+     * - elastic: 触顶触底会回弹
+     * - clamped: 触顶触底不回弹
+     * - 默认值：elastic
+     */
+    movementType?: 'elastic' | 'clamped';
+    /**
+     * 滑动灵敏度
+     * - 值越大滑动越灵敏, 滑动距离会乘上滑动灵敏度
+     * - 默认值：1
+     */
+    scrollSensitivity?: number;
+    /**
+     * 是否有惯性
+     * - true: 滑动后会有惯性滚动
+     * - false: 滑动后立即停止
+     * - 默认值：true
+     */
+    inertia?: boolean;
+    /**
+     * 惯性函数版本
+     * - 1: 倾向于unity的惯性效果
+     * - 2: 倾向于ue的惯性效果
+     * - 默认值：2
+     */
+    inertiaVersion?: number;
+    /**
+     * 惯性衰减率, 仅在inertiaVersion为1时生效
+     * - 取值范围：0（立即停止）到 1（无减速）
+     * - 默认值：0.135
+     */
+    decelerationRate?: number;
+    /**
+     * 静态速度阻力, 仅在inertiaVersion为2时生效
+     * - 每秒速度的固定衰减值
+     * - 默认值：100
+     */
+    staticVelocityDrag?: number;
+    /**
+     * 摩擦系数, 仅在inertiaVersion为2时生效
+     * - 每秒速度的动态衰减值, 当前速度*frictionCoefficient
+     * - 默认值：2.0
+     */
+    frictionCoefficient?: number;
+}
+interface VirtualListProps {
+    /** 布局方向 - horizontal: 水平布局, vertical: 垂直布局 */
+    layout: 'horizontal' | 'vertical';
+    /** 渲染列表项的函数,接收索引返回JSX元素 */
+    renderItemFunc: (index: number) => JSX.Element;
+    /** 每个列表项的尺寸(水平布局时为宽度,垂直布局时为高度) */
+    itemSize: number;
+    /** 列表项总数 */
+    itemCount: number;
+    /** 可视区域宽度 */
+    width: any;
+    /** 可视区域高度 */
+    height: any;
+    /** 缓存的列表项数量(会在可视区域前后多渲染的数量) */
+    cacheSize: number;
+    /** 自定义样式, 会添加到组件根节点 */
+    style?: {};
+    /** 是否还有更多数据可以加载, 返回false会阻止后续判断是否loadMore */
+    hasMore?: () => boolean;
+    /** 触底阈值, 到达后会调用loadMore, 默认为itemSize*2 */
+    touchBottomThreshold?: number;
+    /** 加载更多数据的回调函数 */
+    loadMore?: () => Promise<void>;
+    /** 顶部区域组件 */
+    TopArea?: h.JSX.Element;
+    /** 顶部区域尺寸 */
+    topAreaSize?: number;
+    /** 滚动相关配置属性 */
+    scrollProps?: VirtualListScrollProps;
+}
+interface VirtualListState {
+    start: number;
+    end: number;
+    listHeight: number;
+}
+export declare class VirtualList extends Component<VirtualListProps, VirtualListState> {
+    itemCache: Array<{
+        vNode: h.JSX.Element;
+        isValid: any;
+        ref: any;
+    }>;
+    style: {
+        position?: string;
+        height?: number;
+        width?: any;
+    };
+    ref: any;
+    listSize: number;
+    /** 列表总长度 */
+    protected listHeight: number;
+    /** 触底阈值 */
+    protected touchBottomThreshold: number;
+    /** 视窗可见数量 */
+    protected itemCount: number;
+    /** 是否正在加载更多 */
+    protected isLoading: boolean;
+    /** 视窗可见数量 */
+    protected visibleCount: number;
+    /** 顶部区域高度 */
+    protected topHeight: number;
+    constructor(props: VirtualListProps);
+    componentDidMount(): void;
+    shouldComponentUpdate(nextProps: Readonly<VirtualListProps>, nextState: Readonly<VirtualListState>, nextContext: any): boolean;
+    componentWillReceiveProps(nextProps: Readonly<VirtualListProps>): void;
+    onScroll: (e: Event) => void;
+    render(): h.JSX.Element;
+}
+export {};

package/src/components/react/app/virtualList/VirtualList.js

@@ -0,0 +1,251 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { h, Component, createRef } from 'preact';
+var VirtualListItem = /** @class */ (function (_super) {
+    __extends(VirtualListItem, _super);
+    function VirtualListItem(props) {
+        var _this = _super.call(this, props) || this;
+        _this.updateIndex = function (index) {
+            _this.setState({ index: index });
+        };
+        _this.updateValid = function (isValid) {
+            _this.setState({ isValid: isValid });
+        };
+        _this.updateChildren = function (child) {
+            _this.setState({ child: child });
+        };
+        _this.state = {
+            index: props.index,
+            isValid: true,
+            child: props.child,
+        };
+        return _this;
+    }
+    VirtualListItem.prototype.render = function () {
+        var VirtualListStyle = {};
+        if (this.props.layout === 'horizontal') {
+            VirtualListStyle = {
+                position: 'absolute',
+                left: this.state.index * this.props.itemMainSize,
+                width: this.props.itemMainSize,
+                height: this.props.itemCrossSize,
+                display: this.state.isValid ? 'flex' : 'none',
+            };
+        }
+        else {
+            VirtualListStyle = {
+                position: 'absolute',
+                top: this.state.index * this.props.itemMainSize,
+                height: this.props.itemMainSize,
+                width: this.props.itemCrossSize,
+                display: this.state.isValid ? 'flex' : 'none',
+            };
+        }
+        return h("div", { style: VirtualListStyle }, this.state.child);
+    };
+    return VirtualListItem;
+}(Component));
+var VirtualList = /** @class */ (function (_super) {
+    __extends(VirtualList, _super);
+    function VirtualList(props) {
+        var _this = _super.call(this, props) || this;
+        _this.itemCache = [];
+        _this.onScroll = function (e) {
+            var target = e.target;
+            var scrollTop = _this.props.layout === 'horizontal' ? target.scrollLeft : target.scrollTop;
+            var itemSize = _this.props.itemSize;
+            var start = Math.floor(scrollTop / itemSize);
+            var end = start + _this.visibleCount;
+            _this.setState({ start: start, end: end });
+            // 判断触底逻辑
+            if (_this.isLoading || !_this.props.hasMore)
+                return;
+            if (!_this.props.hasMore())
+                return;
+            var clientHeight = target.clientHeight;
+            var clientSize = _this.state.listHeight;
+            if (scrollTop + clientHeight + _this.touchBottomThreshold > clientSize) {
+                _this.isLoading = true;
+                if (!_this.props.loadMore) {
+                    _this.isLoading = false;
+                    return;
+                }
+                _this.props.loadMore().then(function () {
+                    _this.isLoading = false;
+                });
+            }
+        };
+        _this.style = {
+            position: 'absolute',
+            height: props.itemSize,
+            width: props.width,
+        };
+        _this.topHeight = _this.props.topAreaSize || 0;
+        _this.listHeight = props.itemCount * props.itemSize + _this.topHeight;
+        _this.state = {
+            start: 0,
+            end: 0,
+            listHeight: _this.listHeight,
+        };
+        _this.ref = createRef();
+        _this.visibleCount = 0;
+        _this.listSize = 0;
+        _this.itemCount = 0;
+        _this.touchBottomThreshold = (props.touchBottomThreshold != null || props.touchBottomThreshold != undefined) ? props.touchBottomThreshold : props.itemSize * 2;
+        _this.isLoading = false;
+        return _this;
+    }
+    VirtualList.prototype.componentDidMount = function () {
+        if (this.ref.current) {
+            if (this.props.layout === 'horizontal') {
+                this.listSize = this.ref.current.getBoundingClientRect().width;
+            }
+            else {
+                this.listSize = this.ref.current.getBoundingClientRect().height;
+            }
+        }
+        this.visibleCount = Math.ceil(this.listSize / this.props.itemSize);
+        this.itemCount = this.visibleCount;
+        for (var i = 0; i < this.itemCount + this.props.cacheSize * 2; i++) {
+            var ref = createRef();
+            var itemCrossSize = this.props.layout === 'horizontal' ? this.props.height : this.props.width;
+            var item = {
+                vNode: (h(VirtualListItem, { layout: this.props.layout, index: i, key: i, ref: ref, itemMainSize: this.props.itemSize, itemCrossSize: itemCrossSize, child: this.props.renderItemFunc(i) })),
+                isValid: false,
+                ref: ref,
+            };
+            this.itemCache.push(item);
+            this.forceUpdate();
+        }
+    };
+    VirtualList.prototype.shouldComponentUpdate = function (nextProps, nextState, nextContext) {
+        return this.state.start !== nextState.start || this.state.end !== nextState.end || this.props !== nextProps;
+    };
+    VirtualList.prototype.componentWillReceiveProps = function (nextProps) {
+        if (nextProps.itemCount === this.props.itemCount)
+            return;
+        // 切换显示列表
+        if ((nextProps.itemCount !== this.itemCount && this.props.itemCount === 0) || nextProps.itemCount === 0) {
+            this.setState({
+                start: 0,
+                end: Math.min(this.state.start + this.visibleCount, nextProps.itemCount),
+                listHeight: nextProps.itemCount * nextProps.itemSize + this.topHeight,
+            });
+            this.ref.scrollTop = 0;
+            this.forceUpdate();
+        }
+        if (nextProps.itemCount !== this.props.itemCount) {
+            this.setState({
+                listHeight: nextProps.itemCount * nextProps.itemSize + this.topHeight,
+            });
+            this.forceUpdate();
+        }
+    };
+    VirtualList.prototype.render = function () {
+        var _this = this;
+        var start = Math.max(0, this.state.start - this.props.cacheSize);
+        var end = Math.min(this.state.end + this.props.cacheSize, this.props.itemCount);
+        //diff
+        var currentIndexList = new Set();
+        for (var i = start; i < end; i++) {
+            currentIndexList.add(i);
+        }
+        for (var i = 0; i < this.itemCache.length; i++) {
+            var item = this.itemCache[i];
+            item.isValid = false;
+            if (item.ref.current) {
+                var index = item.ref.current.state.index;
+                if (currentIndexList.has(index)) {
+                    item.isValid = true;
+                    currentIndexList.delete(index);
+                }
+            }
+        }
+        currentIndexList.forEach(function (index) {
+            // create new
+            for (var i = 0; i < _this.itemCache.length; i++) {
+                var item = _this.itemCache[i];
+                if (item.isValid === false) {
+                    if (item.ref.current) {
+                        item.ref.current.updateValid(true);
+                        item.ref.current.updateIndex(index);
+                        item.ref.current.updateChildren(_this.props.renderItemFunc(index));
+                    }
+                    item.isValid = true;
+                    return;
+                }
+            }
+        });
+        var VirtualListStyle = {};
+        if (this.props.layout === 'horizontal') {
+            VirtualListStyle = {
+                display: 'flex',
+                flexDirection: 'row',
+                flexShrink: 0,
+                width: this.props.itemSize * this.props.itemCount,
+            };
+        }
+        else {
+            VirtualListStyle = {
+                display: 'flex',
+                flexDirection: 'column',
+                flexShrink: 0,
+                height: "".concat(this.state.listHeight, "px"),
+            };
+        }
+        /* 兼容双问号 */
+        var movementType = 'elastic';
+        if (this.props.scrollProps && this.props.scrollProps.movementType !== null && this.props.scrollProps.movementType !== undefined) {
+            movementType = this.props.scrollProps.movementType;
+        }
+        var scrollSensitivity = 1;
+        if (this.props.scrollProps && this.props.scrollProps.scrollSensitivity !== null && this.props.scrollProps.scrollSensitivity !== undefined) {
+            scrollSensitivity = this.props.scrollProps.scrollSensitivity;
+        }
+        var inertiaVersion = 2;
+        if (this.props.scrollProps && this.props.scrollProps.inertiaVersion !== null && this.props.scrollProps.inertiaVersion !== undefined) {
+            inertiaVersion = this.props.scrollProps.inertiaVersion;
+        }
+        var decelerationRate = 0.135;
+        if (this.props.scrollProps && this.props.scrollProps.decelerationRate !== null && this.props.scrollProps.decelerationRate !== undefined) {
+            decelerationRate = this.props.scrollProps.decelerationRate;
+        }
+        var staticVelocityDrag = 100;
+        if (this.props.scrollProps && this.props.scrollProps.staticVelocityDrag !== null && this.props.scrollProps.staticVelocityDrag !== undefined) {
+            staticVelocityDrag = this.props.scrollProps.staticVelocityDrag;
+        }
+        var frictionCoefficient = 2.0;
+        if (this.props.scrollProps && this.props.scrollProps.frictionCoefficient !== null && this.props.scrollProps.frictionCoefficient !== undefined) {
+            frictionCoefficient = this.props.scrollProps.frictionCoefficient;
+        }
+        return (h("div", { key: "VirtualListRoot", id: 'VirtualListRoot', "movement-type": movementType, "scroll-sensitivity": scrollSensitivity, "inertia-version": inertiaVersion, "deceleration-rate": decelerationRate, "static-velocity-drag": staticVelocityDrag, "friction-coefficient": frictionCoefficient, ref: this.ref, onScroll: this.onScroll, style: __assign({ position: 'relative', overflow: 'scroll', flexDirection: this.props.layout === 'horizontal' ? 'row' : 'column', width: this.props.width, height: this.props.height }, this.props.style) },
+            this.props.TopArea,
+            h("div", { key: "VirtualList", id: 'VirtualList', style: VirtualListStyle }, this.itemCache.map(function (item) { return item.vNode; }))));
+    };
+    return VirtualList;
+}(Component));
+export { VirtualList };