pixuireactcomponents 1.5.18 → 1.5.20

package/package.json

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

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

@@ -46,6 +46,7 @@ export declare class DragList extends Component<DragListProps, DragListState> {
     private dragIndex;
     private dragEndIndex;
     private containerRect;
+    private init;
     constructor(props: DragListProps);
     componentDidMount(): void;
     moveItem(oldIndex: number, newIndex: number): void;

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

@@ -30,9 +30,10 @@ var DragItem = /** @class */ (function (_super) {
     function DragItem(props) {
         var _this = _super.call(this, props) || this;
         _this.updateIndex = function (index) {
+            _this.index = index;
             var newCol = index % _this.props.visibleCount;
             var newRow = Math.floor(index / _this.props.visibleCount);
-            _this.setState({ index: index, col: newCol, row: newRow });
+            _this.setState({ col: newCol, row: newRow });
             if (_this.props.animationTime != 0) {
                 if (_this.animation) {
                     clearTimeout(_this.animation);
@@ -44,17 +45,16 @@ var DragItem = /** @class */ (function (_super) {
         };
         _this.handleDragStart = function (e) {
             _this.setState({ isDragging: true });
-            _this.props.onDragStart(_this.state.index, e);
+            _this.props.onDragStart(_this.index, e);
         };
         _this.handleDrag = function (e) {
-            _this.props.onDrag(_this.state.index, e);
+            _this.props.onDrag(_this.index, e);
         };
         _this.handleDragEnd = function (e) {
             _this.setState({ isDragging: false });
-            _this.props.onDragEnd(_this.state.index, e);
+            _this.props.onDragEnd(_this.index, e);
         };
         _this.state = {
-            index: props.index,
             isValid: true,
             child: props.child,
             col: _this.props.index % _this.props.visibleCount,
@@ -62,6 +62,7 @@ var DragItem = /** @class */ (function (_super) {
             isDragging: false,
         };
         _this.ref = createRef();
+        _this.index = props.index;
         return _this;
     }
     DragItem.prototype.render = function () {
@@ -117,13 +118,12 @@ var DragList = /** @class */ (function (_super) {
                 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 });
+            if (_this.dragIndex !== -1 && validIndex !== _this.dragIndex) {
+                _this.moveItem(_this.dragIndex, validIndex);
+                _this.dragIndex = validIndex;
             }
         };
         _this.handleDragEnd = function (index, e) {
-            console.log('dragend', e);
             _this.dragIndex = -1;
             _this.setState({
                 draggingIndex: null,
@@ -145,49 +145,49 @@ var DragList = /** @class */ (function (_super) {
             width: 0,
             height: 0,
         };
+        _this.init = false;
         return _this;
     }
     DragList.prototype.componentDidMount = function () {
         if (this.ref.current) {
             this.containerRect = this.ref.current.getBoundingClientRect();
             this.listSize = this.containerRect.width;
+            this.init = true;
         }
-        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);
+        if (this.init) {
+            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();
         }
-        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);
+                if (node.index > oldIndex && node.index <= newIndex) {
+                    this.itemCache[i].ref.current.updateIndex(node.index - 1);
                 }
-                else if (node.state.index == oldIndex) {
+                else if (node.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);
+                if (node.index >= newIndex && node.index < oldIndex) {
+                    this.itemCache[i].ref.current.updateIndex(node.index + 1);
                 }
-                else if (node.state.index == oldIndex) {
+                else if (node.index == oldIndex) {
                     this.itemCache[i].ref.current.updateIndex(newIndex);
                 }
             }
         }
-        this.forceUpdate();
     };
     DragList.prototype.render = function () {
         return (h("div", { ref: this.ref, style: {
@@ -197,7 +197,7 @@ var DragList = /** @class */ (function (_super) {
                 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) }))));
+            h("div", { style: __assign({ display: this.state.draggingIndex !== null ? 'block' : 'none', 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));