@krowdy-ui/views/SuperFilters/FiltersTree/Theme/tree-node-renderer.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _treeNodeRendererStyle = _interopRequireDefault(require("./tree-node-renderer-style"));

var _clsx = _interopRequireDefault(require("clsx"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function TreeNodeRenderer(props) {
  var children = props.children,
      listIndex = props.listIndex,
      swapFrom = props.swapFrom,
      swapLength = props.swapLength,
      swapDepth = props.swapDepth,
      scaffoldBlockPxWidth = props.scaffoldBlockPxWidth,
      lowerSiblingCounts = props.lowerSiblingCounts,
      connectDropTarget = props.connectDropTarget,
      isOver = props.isOver,
      draggedNode = props.draggedNode,
      canDrop = props.canDrop,
      path = props.path;
  var classes = (0, _treeNodeRendererStyle["default"])();
  var scaffold = [];
  var scaffoldBlockCount = lowerSiblingCounts.length;
  lowerSiblingCounts.forEach(function (lowerSiblingCount, i) {
    var lineClass = '';
    if (lowerSiblingCount > 0) {
      if (listIndex === 0) {
        // Top-left corner of the tree
        // +-----+
        // |     |
        // |  +--+
        // |  |  |
        // +--+--+
        lineClass = "".concat(classes.lineHalfHorizontalRight, " ").concat(classes.lineHalfVerticalBottom);
      } else if (i === scaffoldBlockCount - 1) {
        // Last scaffold block in the row, right before the row content
        // +--+--+
        // |  |  |
        // |  +--+
        // |  |  |
        // +--+--+
        lineClass = "".concat(classes.lineHalfHorizontalRight, " ").concat(classes.lineFullVertical);
      } else {
        // Simply connecting the line extending down to the next sibling on this level
        // +--+--+
        // |  |  |
        // |  |  |
        // |  |  |
        // +--+--+
        if (i >= 1) lineClass = classes.lineFullVertical;
      }
    } else if (listIndex === 0) // Top-left corner of the tree, but has no siblings
      // +-----+
      // |     |
      // |  +--+
      // |     |
      // +-----+
      lineClass = classes.lineHalfHorizontalRight;else if (i === scaffoldBlockCount - 1) // The last or only node in this level of the tree
      // +--+--+
      // |  |  |
      // |  +--+
      // |     |
      // +-----+
      lineClass = "".concat(classes.lineHalfVerticalTop, " ").concat(classes.lineHalfHorizontalRight);
    if (i >= 1) scaffold.push( /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(classes.lineBlock, " ").concat(lineClass) // className={('lineBlock', lineClass, rowDirectionClass)}
      ,
      key: "pre_".concat(1 + i),
      style: {
        width: scaffoldBlockPxWidth
      }
    })); // if(treeIndex !== listIndex && i === swapDepth) {
    // let highlightLineClass = ''
    // if(listIndex === swapFrom + swapLength - 1)
    //   // This block is on the bottom (target) line
    //   // This block points at the target block (where the row will go when released)
    //   highlightLineClass = 'rst__highlightBottomLeftCorner'
    // else if(treeIndex === swapFrom)
    //   // This block is on the top (source) line
    //   highlightLineClass = 'rst__highlightTopLeftCorner'
    // else
    //   // This block is between the bottom and top
    //   highlightLineClass = 'rst__highlightLineVertical'
    // scaffold.push(
    //   <div
    //     className={classnames(
    //       'rst__absoluteLineBlock',
    //       highlightLineClass,
    //       rowDirectionClass
    //     )}
    //     key={i}
    //     style={style} />
    // )
    // }
  });
  return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(path.length > 1 && classes.rootScaffold, path.length <= 1 && classes.rootScaffoldNone)
  }, scaffold), _react.Children.map(children, function (child) {
    return (0, _react.cloneElement)(child, {
      canDrop: canDrop,
      draggedNode: draggedNode,
      isOver: isOver,
      listIndex: listIndex,
      lowerSiblingCounts: lowerSiblingCounts,
      swapDepth: swapDepth,
      swapFrom: swapFrom,
      swapLength: swapLength
    });
  })));
}

TreeNodeRenderer.defaultProps = {
  canDrop: false,
  draggedNode: null,
  swapDepth: null,
  swapFrom: null,
  swapLength: null
};
process.env.NODE_ENV !== "production" ? TreeNodeRenderer.propTypes = {
  canDrop: _propTypes["default"].bool,
  children: _propTypes["default"].node.isRequired,
  connectDropTarget: _propTypes["default"].func.isRequired,
  draggedNode: _propTypes["default"].shape({}),
  getPrevRow: _propTypes["default"].func.isRequired,
  isOver: _propTypes["default"].bool.isRequired,
  listIndex: _propTypes["default"].number.isRequired,
  lowerSiblingCounts: _propTypes["default"].arrayOf(_propTypes["default"].number).isRequired,
  node: _propTypes["default"].shape({}).isRequired,
  // Drop target
  path: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])).isRequired,
  rowDirection: _propTypes["default"].string.isRequired,
  scaffoldBlockPxWidth: _propTypes["default"].number.isRequired,
  swapDepth: _propTypes["default"].number,
  // used in dndManager
  swapFrom: _propTypes["default"].number,
  swapLength: _propTypes["default"].number,
  treeId: _propTypes["default"].string.isRequired,
  treeIndex: _propTypes["default"].number.isRequired
} : void 0;
var _default = TreeNodeRenderer;
exports["default"] = _default;