wix-style-react/dist/src/NestableListBase/NestableListBase.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _utils = require("./utils");
var _DragLayer = _interopRequireDefault(require("./DragLayer"));
var _Container = _interopRequireDefault(require("./Container"));
var _NestableListBaseContext = require("./NestableListBaseContext");
var _withDNDContext = _interopRequireDefault(require("./withDNDContext"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/NestableListBase/NestableListBase.js";
function replaceNegativeIndex(items, nextPosition, childrenProperty) {
  var currItems = items;
  return nextPosition.map(nextIndex => {
    if (nextIndex !== -1) {
      currItems = currItems[nextIndex][childrenProperty] || [];
      return nextIndex;
    }
    return currItems.length;
  });
}

// fixing a bug where the new path is increased in nesting
// and the first position jumps too far by 2, and that's why it decreased by 1
// need to check if the jump can become more severe
function getRealNextPosition(prev, next) {
  // moving up a level
  if (prev.length < next.length) {
    return next.map((nextIndex, i) => {
      if (typeof prev[i] !== 'number') {
        return nextIndex;
      }
      return nextIndex > prev[i] ? nextIndex - 1 : nextIndex;
    });
  }
  return next;
}
class NestableListBase extends _react.default.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      items: this.props.items,
      dragging: false
    };
    // drag and drop between multiple nestable lists is not supported
    // according to prevent it for now was created groupName - unique value for every nestable list
    // somethings similar exists in SortableListBase component.
    this.groupName = (0, _utils.generateUniqueGroupId)();
    this.moveItem = _ref => {
      var {
        dragItem,
        prevPosition,
        nextPosition
      } = _ref;
      var {
        childrenProperty,
        preventChangeDepth,
        items
      } = this.props;
      var newItems = this.state.items.slice();
      if (dragItem.preventItemChangeDepth && nextPosition.length !== prevPosition.length) {
        return prevPosition;
      }
      if (preventChangeDepth && nextPosition.length > 1) {
        var parent = (0, _utils.getDropParent)(items, nextPosition, childrenProperty);
        if (!parent) {
          return prevPosition;
        }
      }

      // the remove action might affect the next position,
      // so update next coordinates accordingly
      var realNextPosition = getRealNextPosition(prevPosition, nextPosition);
      if (realNextPosition[realNextPosition.length - 1] === -1) {
        realNextPosition = replaceNegativeIndex(newItems, realNextPosition, childrenProperty);
      }
      newItems = (0, _utils.removeFromTree)(newItems, prevPosition, childrenProperty);
      newItems = (0, _utils.addToTree)(newItems, dragItem, realNextPosition, childrenProperty);
      this.setState({
        items: newItems
      });
      return realNextPosition;
    };
    this.dropItem = item => {
      this.props.onUpdate && this.props.onUpdate({
        items: this.state.items,
        item
      });
    };
    this.onDragStart = itemProps => {
      this.props.onDragStart && this.props.onDragStart(itemProps);
      this.setState({
        dragging: true
      });
    };
    this.onDragEnd = itemProps => {
      this.props.onDragEnd && this.props.onDragEnd(itemProps);
      this.setState({
        dragging: false
      });
    };
  }
  // tried to use getDerivedStateFromProps but encounter an issue where the state was
  // updated internally but props items stayed the same and it caused the new state to be
  // overridden with the old state
  // can be done if component is controlled but requires refactor
  UNSAFE_componentWillReceiveProps(newProps) {
    if (newProps.items !== this.state.items) {
      this.setState({
        items: newProps.items
      });
    }
  }
  render() {
    var {
      items
    } = this.state;
    var {
      renderItem,
      readOnly,
      childrenProperty,
      childrenStyle,
      renderAction,
      isRenderDraggingChildren,
      useDragHandle,
      maxDepth,
      preventChangeDepth,
      threshold,
      theme,
      renderPrefix,
      dragLayerZIndex,
      zIndex
    } = this.props;
    return /*#__PURE__*/_react.default.createElement(_NestableListBaseContext.NestableListBaseContext.Provider, {
      value: {
        groupName: this.groupName,
        useDragHandle,
        maxDepth,
        preventChangeDepth,
        threshold,
        readOnly,
        renderItem,
        renderPrefix,
        moveItem: this.moveItem,
        dropItem: this.dropItem,
        onDragStart: this.onDragStart,
        onDragEnd: this.onDragEnd
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 161,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 177,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement(_Container.default, {
      treeDepth: 1,
      items: items,
      renderAction: renderAction,
      parentPosition: [],
      childrenProperty: childrenProperty,
      childrenStyle: childrenStyle,
      isRenderDraggingChildren: isRenderDraggingChildren,
      topLevel: true,
      theme: theme,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 178,
        columnNumber: 11
      }
    }), this.state.dragging && /*#__PURE__*/_react.default.createElement(_DragLayer.default, {
      isRenderDraggingChildren: isRenderDraggingChildren,
      renderItem: renderItem,
      childrenProperty: childrenProperty,
      childrenStyle: childrenStyle,
      theme: theme,
      dragLayerZIndex: zIndex !== null && zIndex !== void 0 ? zIndex : dragLayerZIndex,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 190,
        columnNumber: 13
      }
    })));
  }
}
NestableListBase.defaultProps = {
  items: [],
  isRenderDraggingChildren: false,
  childrenProperty: 'children',
  childrenStyle: {},
  renderPrefix: () => null,
  renderAction: () => null,
  onUpdate: () => {},
  useDragHandle: false,
  preventChangeDepth: false,
  maxDepth: Infinity,
  threshold: 30,
  dragLayerZIndex: 100
};
var _default = exports.default = (0, _withDNDContext.default)(NestableListBase);
//# sourceMappingURL=NestableListBase.js.map