wix-style-react/dist/es/src/NestableList/NestableList.js

wix-style-react

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

import React from 'react';
import { addToTree, generateUniqueGroupId, getDropParent, removeFromTree } from './utils';
import CustomDragLayer from './DragLayer';
import Container from './Container';
import { NestableListContext } from './NestableListContext';
import withDNDContext from './withDNDContext';

function replaceNegativeIndex(items, nextPosition, childrenProperty) {
  var currItems = items;
  return nextPosition.map(function (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(function (nextIndex, i) {
      if (typeof prev[i] !== 'number') {
        return nextIndex;
      }

      return nextIndex > prev[i] ? nextIndex - 1 : nextIndex;
    });
  }

  return next;
}

var NestableList = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(NestableList, _React$PureComponent);

  var _super = _createSuper(NestableList);

  function NestableList() {
    var _this;

    _classCallCheck(this, NestableList);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "state", {
      items: _this.props.items,
      dragging: false
    });

    _defineProperty(_assertThisInitialized(_this), "groupName", generateUniqueGroupId());

    _defineProperty(_assertThisInitialized(_this), "moveItem", function (_ref) {
      var dragItem = _ref.dragItem,
          prevPosition = _ref.prevPosition,
          nextPosition = _ref.nextPosition;
      var _this$props = _this.props,
          childrenProperty = _this$props.childrenProperty,
          preventChangeDepth = _this$props.preventChangeDepth,
          items = _this$props.items;

      var newItems = _this.state.items.slice();

      if (preventChangeDepth && nextPosition.length > 1) {
        var parent = 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 = removeFromTree(newItems, prevPosition, childrenProperty);
      newItems = addToTree(newItems, dragItem, realNextPosition, childrenProperty);

      _this.setState({
        items: newItems
      });

      return realNextPosition;
    });

    _defineProperty(_assertThisInitialized(_this), "dropItem", function (item) {
      _this.props.onUpdate && _this.props.onUpdate({
        items: _this.state.items,
        item: item
      });
    });

    _defineProperty(_assertThisInitialized(_this), "onDragStart", function (itemProps) {
      _this.props.onDragStart && _this.props.onDragStart(itemProps);

      _this.setState({
        dragging: true
      });
    });

    _defineProperty(_assertThisInitialized(_this), "onDragEnd", function (itemProps) {
      _this.props.onDragEnd && _this.props.onDragEnd(itemProps);

      _this.setState({
        dragging: false
      });
    });

    return _this;
  }

  _createClass(NestableList, [{
    key: "UNSAFE_componentWillReceiveProps",
    value: // 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
    function UNSAFE_componentWillReceiveProps(newProps) {
      if (newProps.items !== this.state.items) {
        this.setState({
          items: newProps.items
        });
      }
    }
  }, {
    key: "render",
    value: function render() {
      var items = this.state.items;
      var _this$props2 = this.props,
          renderItem = _this$props2.renderItem,
          readOnly = _this$props2.readOnly,
          childrenProperty = _this$props2.childrenProperty,
          childrenStyle = _this$props2.childrenStyle,
          renderAction = _this$props2.renderAction,
          isRenderDraggingChildren = _this$props2.isRenderDraggingChildren,
          useDragHandle = _this$props2.useDragHandle,
          maxDepth = _this$props2.maxDepth,
          preventChangeDepth = _this$props2.preventChangeDepth,
          threshold = _this$props2.threshold,
          theme = _this$props2.theme,
          renderPrefix = _this$props2.renderPrefix,
          dragLayerZIndex = _this$props2.dragLayerZIndex;
      return /*#__PURE__*/React.createElement(NestableListContext.Provider, {
        value: {
          groupName: this.groupName,
          useDragHandle: useDragHandle,
          maxDepth: maxDepth,
          preventChangeDepth: preventChangeDepth,
          threshold: threshold,
          readOnly: readOnly,
          renderItem: renderItem,
          renderPrefix: renderPrefix,
          moveItem: this.moveItem,
          dropItem: this.dropItem,
          onDragStart: this.onDragStart,
          onDragEnd: this.onDragEnd
        }
      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, {
        treeDepth: 1,
        items: items,
        renderAction: renderAction,
        parentPosition: [],
        childrenProperty: childrenProperty,
        childrenStyle: childrenStyle,
        isRenderDraggingChildren: isRenderDraggingChildren,
        topLevel: true,
        theme: theme
      }), this.state.dragging && /*#__PURE__*/React.createElement(CustomDragLayer, {
        isRenderDraggingChildren: isRenderDraggingChildren,
        renderItem: renderItem,
        childrenProperty: childrenProperty,
        childrenStyle: childrenStyle,
        theme: theme,
        dragLayerZIndex: dragLayerZIndex
      })));
    }
  }]);

  return NestableList;
}(React.PureComponent);

_defineProperty(NestableList, "defaultProps", {
  items: [],
  isRenderDraggingChildren: false,
  childrenProperty: 'children',
  childrenStyle: {},
  renderPrefix: function renderPrefix() {
    return null;
  },
  renderAction: function renderAction() {
    return null;
  },
  onUpdate: function onUpdate() {},
  useDragHandle: false,
  preventChangeDepth: false,
  maxDepth: Infinity,
  threshold: 30,
  dragLayerZIndex: 100
});

export default withDNDContext(NestableList);