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

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import XDate from 'xdate';
import { DragIndicator as DragIndicatorIcon } from '@material-ui/icons';
import useStyles from './node-content-renderer-style';
import { Chip, Typography, Tooltip } from '@krowdy-ui/core';

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

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

const ChipContainer = props => {
  const {
    label,
    size,
    dots
  } = props;
  if (label.length <= size || !dots) return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Chip, {
    color: "primary",
    label: label,
    size: "small",
    variant: "outlined"
  }));else return /*#__PURE__*/React.createElement(Tooltip, {
    title: label
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Chip, {
    color: "primary",
    label: cutValue(label, size),
    size: "small",
    variant: "outlined"
  })));
};

const Content = ({
  value,
  variant,
  color,
  size,
  dots
}) => {
  if (value.length <= size || !dots) return /*#__PURE__*/React.createElement(Typography, {
    color: color,
    variant: variant
  }, value);else return /*#__PURE__*/React.createElement(Tooltip, {
    title: value
  }, /*#__PURE__*/React.createElement(Typography, {
    color: color,
    variant: variant
  }, cutValue(value, size)));
};

var _ref = /*#__PURE__*/React.createElement(DragIndicatorIcon, null);

function FileThemeNodeContentRenderer(props) {
  const {
    connectDragPreview,
    connectDragSource,
    isDragging,
    dots,
    canDrop,
    // canDrag,
    node,
    // title,
    draggedNode,
    // path,
    // treeIndex,
    buttons,
    className,
    didDrop // treeId // Not needed, but preserved for other renderers
    // isOver, // Not needed, but preserved for other renderers
    // parentNode, // Needed for dndManager
    // rowDirection

  } = props;
  const classes = useStyles(); // const nodeTitle = title || node.title

  const isDraggedDescendant = draggedNode && isDescendant(draggedNode, node);
  const isLandingPadActive = !didDrop && isDragging;
  const nodeContent = /*#__PURE__*/React.createElement("div", {
    className: classes.nodeContent
  }, connectDragPreview( /*#__PURE__*/React.createElement("div", {
    className: classes.rowWrapper
  }, connectDragSource( /*#__PURE__*/React.createElement("div", {
    className: classes.contentDrag
  }, _ref)), /*#__PURE__*/React.createElement("div", {
    className: classes.row + (isLandingPadActive ? ` ${classes.rowLandingPad}` : '') + (isLandingPadActive && !canDrop ? ` ${classes.rowCancelPad}` : '') + (className ? ` ${className}` : ''),
    style: {
      opacity: isDraggedDescendant ? 0.5 : 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    // className={classes.rowLabel}
    className: classes.rowPanelLeft
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.rowContentTitle
  }, /*#__PURE__*/React.createElement(Content, {
    color: "body",
    dots: dots,
    size: 15,
    value: node.label,
    variant: "body2"
  }), /*#__PURE__*/React.createElement(Content, {
    color: "info",
    dots: dots,
    size: 20,
    value: node.operatorLabel,
    variant: "info1"
  })), node.value ? /*#__PURE__*/React.createElement("div", {
    className: classes.rowContentChips
  }, Array.isArray(node.value) ? node.value.map((value, indexValue) => {
    const label = node.type === 'date' ? new XDate(value.label || value).toString('dd/MM/yyyy') : value.label || value;
    return /*#__PURE__*/React.createElement(ChipContainer, {
      dots: dots,
      key: `chip-${1 + indexValue}`,
      label: label,
      size: 10
    });
  }) : /*#__PURE__*/React.createElement(ChipContainer, {
    dots: dots,
    label: node.type === 'date' ? new XDate(node.value).toString('dd/MM/yyyy') : node.value,
    size: 10
  })) : null), /*#__PURE__*/React.createElement("div", {
    // className={classes.rowToolbar}
    className: classes.rowPanelRight
  }, buttons)))));
  return nodeContent;
}

FileThemeNodeContentRenderer.defaultProps = {
  buttons: null,
  canDrag: false,
  canDrop: false,
  className: '',
  draggedNode: null,
  isSearchFocus: false,
  isSearchMatch: false,
  label: null,
  parentNode: null,
  style: {},
  swapDepth: null,
  swapFrom: null,
  swapLength: null,
  toggleChildrenVisibility: null
};
process.env.NODE_ENV !== "production" ? FileThemeNodeContentRenderer.propTypes = {
  buttons: PropTypes.node,
  canDrag: PropTypes.bool,
  canDrop: PropTypes.bool,
  className: PropTypes.string,
  connectDragPreview: PropTypes.func.isRequired,
  connectDragSource: PropTypes.func.isRequired,
  didDrop: PropTypes.bool.isRequired,
  draggedNode: PropTypes.shape({}),
  isDragging: PropTypes.bool.isRequired,
  isOver: PropTypes.bool.isRequired,
  isSearchFocus: PropTypes.bool,
  isSearchMatch: PropTypes.bool,
  label: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
  listIndex: PropTypes.number.isRequired,
  lowerSiblingCounts: PropTypes.arrayOf(PropTypes.number).isRequired,
  node: PropTypes.shape({}).isRequired,
  parentNode: PropTypes.shape({}),
  path: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
  rowDirection: PropTypes.string.isRequired,
  // Drag and drop API functions
  // Drag source
  scaffoldBlockPxWidth: PropTypes.number.isRequired,
  style: PropTypes.shape({}),
  swapDepth: PropTypes.number,
  swapFrom: PropTypes.number,
  swapLength: PropTypes.number,
  toggleChildrenVisibility: PropTypes.func,
  // Needed for dndManager
  // Drop target
  treeId: PropTypes.string.isRequired,
  treeIndex: PropTypes.number.isRequired
} : void 0;
export default FileThemeNodeContentRenderer;