@parkassist/pa-ui-library/dist/components/NestedGroup/index.js

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Element, ElementContent, FakeElement, Field, IconWrapper, StyledNestable } from "./style";
import { Row } from "../Layout/Flex";
import * as Icons from "../Icons";
const iconByType = {
  "building": _jsx(Icons.HomeIcon, {}),
  "level": _jsx(Icons.OccupancyIcon, {}),
  "add_level": _jsx(Icons.AddIcon, {}),
  "add_building": _jsx(Icons.AddIcon, {})
};
function isAValidMovement(dragItem, destinationParent) {
  if (dragItem.type === "level") {
    return destinationParent && destinationParent.type === "building";
  }
  if (dragItem.type === "building") {
    return !destinationParent;
  }
}
const renderItem = ({
  onClick,
  selected,
  accentColor,
  filterColor
}) => ({
  item,
  collapseIcon,
  handler
}) => {
  if (item.id <= 0) {
    return _jsx(FakeElement, {
      onClick: () => onClick(item),
      accentColor: accentColor,
      children: _jsx(ElementContent, {
        children: _jsx(Field, {
          children: _jsxs(Row, {
            "data-testid": item.type,
            children: [_jsx(Field, {
              children: handler
            }), _jsx(Field, {
              children: collapseIcon
            }), _jsx(IconWrapper, {
              hidden: item.hidden,
              children: iconByType[item.type]
            }), _jsx(Field, {
              children: item.text
            })]
          })
        })
      })
    });
  }
  return _jsx(Element, {
    selected: selected && selected.id === item.id,
    accentColor: accentColor,
    hidden: item.hidden,
    onClick: () => onClick(item),
    children: _jsx(ElementContent, {
      children: _jsx(Field, {
        children: _jsxs(Row, {
          "data-testid": `${item.type}-${item.text}`,
          children: [_jsx(Field, {
            children: handler
          }), _jsx(Field, {
            children: collapseIcon
          }), _jsx(IconWrapper, {
            hidden: item.hidden,
            children: iconByType[item.type]
          }), _jsx(Field, {
            children: item.text
          })]
        })
      })
    })
  });
};
function hasAdder(items) {
  if (!items || items.length === 0) {
    return false;
  }
  function isAdder(item) {
    return item.type === "add_level" || item.type === "add_building";
  }
  const adderFound = items.some(isAdder);
  return adderFound;
}
function addAdders(items) {
  const buildingAdder = {
    id: 0,
    type: "add_building",
    text: "Add building"
  };
  const levelAdder = numberOfBuilding => ({
    id: -numberOfBuilding,
    numberOfBuilding,
    type: "add_level",
    text: "Add level"
  });
  var itemsToEdit = JSON.parse(JSON.stringify(items));
  itemsToEdit.forEach((building, numberOfBuilding) => {
    if (building.type !== "building") {
      return null;
    }
    if (!building.children) {
      building.children = [levelAdder(numberOfBuilding)];
      return;
    }
    if (!hasAdder(building.children)) {
      building.children.push(levelAdder(numberOfBuilding));
    }
  });
  if (!hasAdder(items)) {
    itemsToEdit.push(buildingAdder);
  }
  return itemsToEdit;
}
;
const cleanSelection = selectedItem => {
  if (selectedItem.type === "building") {
    return cleanAdders([selectedItem])[0];
  }
  return selectedItem;
};
const cleanAdders = structure => {
  var structureWithoutAdder = structure.filter(building => typeof building.id === "string");
  var structureWithCleanLevels = structureWithoutAdder.map(building => {
    return Object.assign(Object.assign({}, building), {
      children: building.children.filter(level => typeof level.id === "string")
    });
  });
  return structureWithCleanLevels;
};
const NestedGroup = ({
  width = 500,
  selected,
  onSelect,
  onAddBuilding,
  onAddLevel,
  items,
  onChange,
  accentColor
}) => {
  return _jsx(StyledNestable, {
    width: width,
    items: addAdders(items),
    maxDepth: 2,
    confirmChange: isAValidMovement,
    onChange: newItems => {
      onChange(cleanAdders(newItems));
    },
    renderItem: renderItem({
      onClick: item => {
        if (item.type === "add_level") {
          onAddLevel(items[item.numberOfBuilding]);
          return;
        }
        if (item.type === "add_building") {
          onAddBuilding();
          return;
        }
        onSelect(cleanSelection(item));
      },
      selected,
      accentColor
    })
  });
};
export default NestedGroup;