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

React components that implement Google's Material Design.

"use strict";

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

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

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

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

var _xdate = _interopRequireDefault(require("xdate"));

var _nodeContentRendererStyle = _interopRequireDefault(require("./node-content-renderer-style"));

var _core = require("@krowdy-ui/core");

var _icons = require("@material-ui/icons");

function isDescendant(older, younger) {
  return !!older.children && typeof older.children !== 'function' && older.children.some(function (child) {
    return child === younger || isDescendant(child, younger);
  });
}

function cutValue(value, size) {
  return value.length > size ? value.slice(0, size) + '...' : value;
}

var Value = function Value(_ref) {
  var label = _ref.label,
      size = _ref.size,
      dots = _ref.dots;
  var classes = useContentStyles();
  if (label.length <= size || !dots) return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.value,
    component: "span",
    variant: "caption"
  }, label));else return /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
    title: label
  }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.value,
    component: "span",
    variant: "caption"
  }, cutValue(label, size))));
};

var Label = function Label(_ref2) {
  var value = _ref2.value,
      dots = _ref2.dots,
      size = _ref2.size;
  var classes = useContentStyles();
  if (value.length <= size || !dots) return /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.label,
    component: "span",
    variant: "body1"
  }, value);else return /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
    title: value
  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.label,
    component: "span",
    variant: "body1"
  }, cutValue(value, size)));
};

var Span = function Span(_ref3) {
  var value = _ref3.value,
      dots = _ref3.dots,
      size = _ref3.size;
  var classes = useContentStyles();
  if (value.length <= size || !dots) return /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.span,
    component: "span",
    variant: "body1"
  }, value);else return /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
    title: value
  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.span,
    component: "span",
    variant: "body1"
  }, cutValue(value, size)));
};

var useContentStyles = (0, _core.makeStyles)(function (theme) {
  return {
    label: {
      color: theme.palette.primary[900],
      fontSize: 12
    },
    span: {
      color: theme.palette.grey[600],
      fontSize: 10,
      marginLeft: theme.spacing(0.5)
    },
    value: {
      color: theme.palette.grey[800],
      fontSize: 10,
      lineHeight: '16px'
    }
  };
});

function FileThemeNodeContentRenderer(props) {
  var connectDragPreview = props.connectDragPreview,
      connectDragSource = props.connectDragSource,
      isDragging = props.isDragging,
      dots = props.dots,
      canDrop = props.canDrop,
      node = props.node,
      draggedNode = props.draggedNode,
      buttons = props.buttons,
      className = props.className,
      didDrop = props.didDrop;
  var classes = (0, _nodeContentRendererStyle["default"])();
  var isDraggedDescendant = draggedNode && isDescendant(draggedNode, node);
  var isLandingPadActive = !didDrop && isDragging;

  var nodeContent = /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.nodeContent
  }, connectDragPreview( /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.rowWrapper
  }, connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.containerCard
  }, node.type === 'list' && node.operator === '$nin' && /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
    size: "small"
  }, /*#__PURE__*/_react["default"].createElement(_icons.Lock, {
    className: classes.lockIcon,
    fontSize: "small"
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.row + (isLandingPadActive ? " ".concat(classes.rowLandingPad) : '') + (isLandingPadActive && !canDrop ? " ".concat(classes.rowCancelPad) : '') + (className ? " ".concat(className) : ''),
    style: {
      opacity: isDraggedDescendant ? 0.5 : 1
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.rowPanelLeft
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.rowContentTitle
  }, /*#__PURE__*/_react["default"].createElement(Label, {
    dots: dots,
    size: 15,
    value: node.label
  }), /*#__PURE__*/_react["default"].createElement(Span, {
    color: "info",
    dots: dots,
    size: 20,
    value: node.operatorLabel,
    variant: "info1"
  })), node.value ? /*#__PURE__*/_react["default"].createElement("div", null, Array.isArray(node.value) ? node.value.map(function (value, indexValue) {
    var label = node.type === 'date' ? new _xdate["default"](value.label || value).toString('dd/MM/yyyy') : value.label || value;
    return /*#__PURE__*/_react["default"].createElement(Value, {
      dots: dots,
      key: "chip-".concat(1 + indexValue),
      label: label,
      size: 10
    });
  }) : /*#__PURE__*/_react["default"].createElement(Value, {
    dots: dots,
    label: node.type === 'date' ? new _xdate["default"](node.value).toString('dd/MM/yyyy') : node.value,
    size: 10
  })) : null), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.rowPanelRight
  }, buttons)))))));

  return nodeContent;
}

process.env.NODE_ENV !== "production" ? FileThemeNodeContentRenderer.propTypes = {
  buttons: _propTypes["default"].node,
  canDrag: _propTypes["default"].bool,
  canDrop: _propTypes["default"].bool,
  className: _propTypes["default"].string,
  connectDragPreview: _propTypes["default"].func.isRequired,
  connectDragSource: _propTypes["default"].func.isRequired,
  didDrop: _propTypes["default"].bool.isRequired,
  draggedNode: _propTypes["default"].shape({}),
  isDragging: _propTypes["default"].bool.isRequired,
  isOver: _propTypes["default"].bool.isRequired,
  isSearchFocus: _propTypes["default"].bool,
  isSearchMatch: _propTypes["default"].bool,
  label: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
  listIndex: _propTypes["default"].number.isRequired,
  lowerSiblingCounts: _propTypes["default"].arrayOf(_propTypes["default"].number).isRequired,
  node: _propTypes["default"].shape({}).isRequired,
  parentNode: _propTypes["default"].shape({}),
  path: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])).isRequired,
  rowDirection: _propTypes["default"].string.isRequired,
  scaffoldBlockPxWidth: _propTypes["default"].number.isRequired,
  style: _propTypes["default"].shape({}),
  swapDepth: _propTypes["default"].number,
  swapFrom: _propTypes["default"].number,
  swapLength: _propTypes["default"].number,
  toggleChildrenVisibility: _propTypes["default"].func,
  treeId: _propTypes["default"].string.isRequired,
  treeIndex: _propTypes["default"].number.isRequired
} : void 0;
var _default = FileThemeNodeContentRenderer;
exports["default"] = _default;