pixuireactcomponents 1.5.16 → 1.5.18

package/index.d.ts

@@ -18,6 +18,6 @@ export { tools } from "./src/components/tools/tools";
 export { PreloadImg } from "./src/components/react/app/preloadImg/PreloadImg";
 export { LoadChecker } from "./src/components/tools/LoadChecker";
 export { AntiRepeat } from "./src/components/tools/antiRepeat";
-export { DragList } from "./src/components/react/app/listDrag/listDrag";
+export { DragList } from "./src/components/react/app/dragList/dragList";
 export { Slider, SliderProps } from "./src/components/react/app/slider/Slider";
 export { ImgPreLoader_base64, PreLoadPic_base64 } from "./src/components/tools/ImgPreLoader";

package/index.js

@@ -23,4 +23,4 @@ export { tools } from './src/components/tools/tools';
 export { PreloadImg } from './src/components/react/app/preloadImg/PreloadImg';
 export { LoadChecker } from './src/components/tools/LoadChecker';
 export { AntiRepeat } from './src/components/tools/antiRepeat';
-export { DragList } from './src/components/react/app/listDrag/listDrag';
+export { DragList } from './src/components/react/app/dragList/dragList';

package/package.json

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

package/src/components/react/app/dragList/dragList.d.ts

@@ -0,0 +1,57 @@
+import { h, Component, JSX } from 'preact';
+interface DragListProps {
+    /** 在渲染时回调, 返回需要绘制的内容 */
+    renderItemFunc: (index: number) => JSX.Element;
+    /** item宽度 */
+    itemWidth: number;
+    /** item高度 */
+    itemHeight: number;
+    /** item数量 */
+    itemSize: number;
+    /** 可视区域宽度 */
+    width: any;
+    /** 可视区域高度 */
+    height: any;
+    /** 拖动时虚块的样式 */
+    hoverItemStyle?: {};
+    /** 被拖动item样式 */
+    dragItemStyle?: {};
+    /** item样式 */
+    itemStyle?: {};
+    /** ms, 动画速度, 0为没有动画, 默认150 */
+    animationTime?: number;
+}
+interface DragListState {
+    itemIndex: number[];
+    draggingIndex: number | null;
+    dragOffsetX: number;
+    dragOffsetY: number;
+    width: number;
+    height: number;
+    itemHeight: number;
+    itemWidth: number;
+    itemSize: number;
+}
+export declare class DragList extends Component<DragListProps, DragListState> {
+    itemCache: Array<{
+        vNode: h.JSX.Element;
+        isValid: any;
+        ref: any;
+    }>;
+    ref: any;
+    listSize: number;
+    animated: any;
+    /** 每行可以放置元素 */
+    protected visibleCount: number;
+    private dragIndex;
+    private dragEndIndex;
+    private containerRect;
+    constructor(props: DragListProps);
+    componentDidMount(): void;
+    moveItem(oldIndex: number, newIndex: number): void;
+    handleDragStart: (index: number, e: MouseEvent) => void;
+    handleDrag: (index: number, e: MouseEvent) => void;
+    handleDragEnd: (index: number, e: MouseEvent) => void;
+    render(): h.JSX.Element;
+}
+export {};

package/src/components/react/app/dragList/dragList.js

@@ -0,0 +1,204 @@
+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 DragItem = /** @class */ (function (_super) {
+    __extends(DragItem, _super);
+    function DragItem(props) {
+        var _this = _super.call(this, props) || this;
+        _this.updateIndex = function (index) {
+            var newCol = index % _this.props.visibleCount;
+            var newRow = Math.floor(index / _this.props.visibleCount);
+            _this.setState({ index: index, col: newCol, row: newRow });
+            if (_this.props.animationTime != 0) {
+                if (_this.animation) {
+                    clearTimeout(_this.animation);
+                }
+                _this.animation = setTimeout(function () {
+                    _this.animation = null;
+                }, _this.props.animationTime);
+            }
+        };
+        _this.handleDragStart = function (e) {
+            _this.setState({ isDragging: true });
+            _this.props.onDragStart(_this.state.index, e);
+        };
+        _this.handleDrag = function (e) {
+            _this.props.onDrag(_this.state.index, e);
+        };
+        _this.handleDragEnd = function (e) {
+            _this.setState({ isDragging: false });
+            _this.props.onDragEnd(_this.state.index, e);
+        };
+        _this.state = {
+            index: props.index,
+            isValid: true,
+            child: props.child,
+            col: _this.props.index % _this.props.visibleCount,
+            row: Math.floor(_this.props.index / _this.props.visibleCount),
+            isDragging: false,
+        };
+        _this.ref = createRef();
+        return _this;
+    }
+    DragItem.prototype.render = function () {
+        var _this = this;
+        var DragItemStyle;
+        DragItemStyle = {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: this.props.itemWidth,
+            height: this.props.itemHeight,
+            display: 'flex',
+            transform: "translate3d(".concat(this.state.col * this.props.itemWidth, "px, ").concat(this.state.row * this.props.itemHeight, "px, 0)"),
+        };
+        if (this.props.animationTime != 0) {
+            DragItemStyle['transition'] = "transform ".concat(this.props.animationTime, "ms ease");
+        }
+        DragItemStyle = __assign(__assign({}, DragItemStyle), this.props.style);
+        if (this.state.isDragging) {
+            DragItemStyle = __assign(__assign({}, DragItemStyle), this.props.dragStyle);
+        }
+        return h("div", { draggable: true, onDragStart: function (e) {
+                _this.handleDragStart(e);
+            }, onDrag: function (e) {
+                _this.handleDrag(e);
+            }, onDragEnd: function (e) {
+                _this.handleDragEnd(e);
+            }, ref: this.ref, style: DragItemStyle }, this.state.child);
+    };
+    return DragItem;
+}(Component));
+var DragList = /** @class */ (function (_super) {
+    __extends(DragList, _super);
+    function DragList(props) {
+        var _this = _super.call(this, props) || this;
+        _this.itemCache = [];
+        _this.handleDragStart = function (index, e) {
+            _this.dragIndex = index;
+            _this.setState({
+                draggingIndex: index,
+            });
+        };
+        _this.handleDrag = function (index, e) {
+            if (!_this.containerRect || e.screenX == 0) // 浏览器松开鼠标后会派发一次错误的drag事件
+                return;
+            var relativeX = e.clientX - _this.containerRect.left;
+            var relativeY = e.clientY - _this.containerRect.top;
+            var col = Math.floor(relativeX / _this.props.itemWidth);
+            var row = Math.floor(relativeY / _this.props.itemHeight);
+            var targetIndex = row * _this.visibleCount + col;
+            var validIndex = Math.max(0, Math.min(targetIndex, _this.props.itemSize - 1));
+            _this.setState({
+                dragOffsetX: relativeX - _this.props.itemWidth / 2,
+                dragOffsetY: relativeY - _this.props.itemHeight / 2,
+            });
+            if (_this.state.draggingIndex !== null && validIndex !== _this.state.draggingIndex) {
+                _this.moveItem(_this.state.draggingIndex, validIndex);
+                _this.setState({ draggingIndex: validIndex });
+            }
+        };
+        _this.handleDragEnd = function (index, e) {
+            console.log('dragend', e);
+            _this.dragIndex = -1;
+            _this.setState({
+                draggingIndex: null,
+            });
+        };
+        _this.ref = createRef();
+        _this.listSize = 0;
+        _this.visibleCount = 0;
+        _this.dragIndex = -1;
+        _this.dragEndIndex = -1;
+        _this.state = {
+            itemHeight: props.itemHeight,
+            itemWidth: props.itemWidth,
+            itemSize: props.itemSize,
+            itemIndex: Array.from({ length: props.itemSize }, function (_, i) { return i; }),
+            draggingIndex: null,
+            dragOffsetX: 0,
+            dragOffsetY: 0,
+            width: 0,
+            height: 0,
+        };
+        return _this;
+    }
+    DragList.prototype.componentDidMount = function () {
+        if (this.ref.current) {
+            this.containerRect = this.ref.current.getBoundingClientRect();
+            this.listSize = this.containerRect.width;
+        }
+        this.visibleCount = Math.floor(this.listSize / this.props.itemWidth);
+        for (var i = 0; i < this.props.itemSize; i++) {
+            var ref = createRef();
+            var item = {
+                vNode: (h(DragItem, { onDragStart: this.handleDragStart, onDrag: this.handleDrag, onDragEnd: this.handleDragEnd, key: i, ref: ref, index: i, child: this.props.renderItemFunc(i), itemHeight: this.props.itemHeight, itemWidth: this.props.itemWidth, visibleCount: this.visibleCount, animationTime: this.props.animationTime != null ? this.props.animationTime : 150, style: this.props.itemStyle ? this.props.itemStyle : {}, dragStyle: this.props.dragItemStyle ? this.props.dragItemStyle : {} })),
+                isValid: false,
+                ref: ref,
+            };
+            this.itemCache.push(item);
+        }
+        this.forceUpdate();
+    };
+    DragList.prototype.moveItem = function (oldIndex, newIndex) {
+        var item = this.itemCache[oldIndex];
+        // this.itemCache.splice(oldIndex, 1);
+        // this.itemCache.splice(newIndex, 0, item);
+        for (var i = 0; i < this.itemCache.length; i++) {
+            var node = this.itemCache[i].ref.current;
+            if (oldIndex < newIndex) {
+                if (node.state.index > oldIndex && node.state.index <= newIndex) {
+                    this.itemCache[i].ref.current.updateIndex(node.state.index - 1);
+                }
+                else if (node.state.index == oldIndex) {
+                    this.itemCache[i].ref.current.updateIndex(newIndex);
+                }
+            }
+            else {
+                if (node.state.index >= newIndex && node.state.index < oldIndex) {
+                    this.itemCache[i].ref.current.updateIndex(node.state.index + 1);
+                }
+                else if (node.state.index == oldIndex) {
+                    this.itemCache[i].ref.current.updateIndex(newIndex);
+                }
+            }
+        }
+        this.forceUpdate();
+    };
+    DragList.prototype.render = function () {
+        return (h("div", { ref: this.ref, style: {
+                position: 'relative',
+                display: 'flex',
+                width: this.props.width,
+                height: this.props.height,
+            } },
+            this.itemCache.map(function (item) { return item.vNode; }),
+            this.state.draggingIndex !== null && (h("div", { style: __assign({ position: 'absolute', top: "".concat(this.state.dragOffsetY, "px"), left: "".concat(this.state.dragOffsetX, "px"), width: this.props.itemWidth, height: this.props.itemHeight, zIndex: 1000, pointerEvents: 'none', opacity: 0.5 }, this.props.hoverItemStyle) }))));
+    };
+    return DragList;
+}(Component));
+export { DragList };

package/src/components/react/app/listDrag/listDrag.d.ts

@@ -1,27 +0,0 @@
-import { h, Component } from 'preact';
-interface DragListProps {
-    items: string[];
-}
-interface DragListState {
-    items: string[];
-    draggingIndex: number | null;
-    dragOverIndex: number | null;
-    dragStartX: number;
-    dragStartY: number;
-    dragOffsetX: number;
-    dragOffsetY: number;
-    width: number;
-    height: number;
-    hoverIndex: number | null;
-}
-export declare class DragList extends Component<DragListProps, DragListState> {
-    constructor(props: DragListProps);
-    handleMouseDown: (index: number, e: MouseEvent) => void;
-    handleMouseMove: (e: MouseEvent) => void;
-    handleMouseUp: () => void;
-    handleMouseEnter: (index: number) => void;
-    handleMouseLeave: () => void;
-    getDragOverIndex: (clientX: number, clientY: number) => number | null;
-    render(): h.JSX.Element;
-}
-export {};

package/src/components/react/app/listDrag/listDrag.js

@@ -1,150 +0,0 @@
-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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { h, Component } from 'preact';
-var DragList = /** @class */ (function (_super) {
-    __extends(DragList, _super);
-    function DragList(props) {
-        var _this = _super.call(this, props) || this;
-        _this.handleMouseDown = function (index, e) {
-            var rect = e.target.getBoundingClientRect();
-            _this.setState({
-                draggingIndex: index,
-                dragStartX: e.clientX,
-                dragStartY: e.clientY,
-                dragOffsetX: e.clientX - rect.left,
-                dragOffsetY: e.clientY - rect.top,
-                width: rect.width,
-                height: rect.height,
-            });
-        };
-        _this.handleMouseMove = function (e) {
-            var draggingIndex = _this.state.draggingIndex;
-            if (draggingIndex !== null) {
-                var dragOverIndex = _this.getDragOverIndex(e.clientX, e.clientY);
-                _this.setState({
-                    dragOverIndex: dragOverIndex,
-                    dragStartX: e.clientX,
-                    dragStartY: e.clientY,
-                });
-            }
-        };
-        _this.handleMouseUp = function () {
-            var _a = _this.state, draggingIndex = _a.draggingIndex, dragOverIndex = _a.dragOverIndex, items = _a.items;
-            if (draggingIndex !== null && dragOverIndex !== null) {
-                var newItems = __spreadArray([], items, true);
-                var draggedItem = newItems.splice(draggingIndex, 1)[0];
-                newItems.splice(dragOverIndex, 0, draggedItem);
-                _this.setState({
-                    items: newItems,
-                    draggingIndex: null,
-                    dragOverIndex: null,
-                });
-            }
-            else {
-                _this.setState({
-                    draggingIndex: null,
-                    dragOverIndex: null,
-                });
-            }
-        };
-        _this.handleMouseEnter = function (index) {
-            _this.setState({ hoverIndex: index });
-        };
-        _this.handleMouseLeave = function () {
-            _this.setState({ hoverIndex: null });
-        };
-        _this.getDragOverIndex = function (clientX, clientY) {
-            var _a = _this.state, draggingIndex = _a.draggingIndex, width = _a.width, height = _a.height, hoverIndex = _a.hoverIndex;
-            if (draggingIndex === null)
-                return null;
-            var element = document.elementFromPoint ? document.elementFromPoint(clientX, clientY) : null;
-            if (element == null) {
-                return hoverIndex;
-            }
-            if (element && element.className.includes('drag-item')) {
-                var targetIndex = Array.from(element.parentNode.children).indexOf(element);
-                if (targetIndex === draggingIndex)
-                    return null;
-                var targetRect = element.getBoundingClientRect();
-                var draggingRect = {
-                    left: clientX - _this.state.dragOffsetX,
-                    top: clientY - _this.state.dragOffsetY,
-                    right: clientX - _this.state.dragOffsetX + width,
-                    bottom: clientY - _this.state.dragOffsetY + height,
-                };
-                var overlapX = Math.min(draggingRect.right, targetRect.right) - Math.max(draggingRect.left, targetRect.left);
-                var overlapY = Math.min(draggingRect.bottom, targetRect.bottom) - Math.max(draggingRect.top, targetRect.top);
-                var overlapRatioX = overlapX / width;
-                var overlapRatioY = overlapY / height;
-                if (overlapRatioX >= 0.5 && overlapRatioY >= 0.5) {
-                    return targetIndex;
-                }
-            }
-            return null;
-        };
-        _this.state = {
-            items: props.items,
-            draggingIndex: null,
-            dragOverIndex: null,
-            dragStartX: 0,
-            dragStartY: 0,
-            dragOffsetX: 0,
-            dragOffsetY: 0,
-            width: 0,
-            height: 0,
-            hoverIndex: null,
-        };
-        return _this;
-    }
-    DragList.prototype.render = function () {
-        var _this = this;
-        var _a = this.state, items = _a.items, width = _a.width, height = _a.height, draggingIndex = _a.draggingIndex, dragOverIndex = _a.dragOverIndex, dragStartX = _a.dragStartX, dragStartY = _a.dragStartY, dragOffsetX = _a.dragOffsetX, dragOffsetY = _a.dragOffsetY, hoverIndex = _a.hoverIndex;
-        return (h("div", { style: { display: 'flex', flexWrap: 'wrap', flexDirection: 'row', alignItems: 'center', justifyContent: 'center' } },
-            items.map(function (item, index) { return (h("div", { key: index, draggable: true, style: {
-                    padding: '8px',
-                    border: '1px solid #ccc',
-                    cursor: 'grab',
-                    transition: 'transform 0.2s ease',
-                    margin: '0.1rem',
-                    position: 'relative',
-                    opacity: index === draggingIndex ? 0.5 : 1,
-                    zIndex: index === draggingIndex ? 1 : 'auto',
-                    backgroundColor: index === dragOverIndex ? '#f0f0f0' : '#fff',
-                }, onDragStart: function (e) { return _this.handleMouseDown(index, e); }, onDrag: _this.handleMouseMove, onDragEnd: _this.handleMouseUp, onMouseEnter: function () { return _this.handleMouseEnter(index); }, onMouseLeave: _this.handleMouseLeave }, item)); }),
-            draggingIndex !== null && (h("div", { style: {
-                    position: 'fixed',
-                    width: width,
-                    height: height,
-                    left: dragStartX - dragOffsetX,
-                    top: dragStartY - dragOffsetY,
-                    pointerEvents: 'none',
-                    backgroundColor: '#f0f0f0',
-                    padding: '8px',
-                    border: '1px solid #ccc',
-                } }, items[draggingIndex]))));
-    };
-    return DragList;
-}(Component));
-export { DragList };