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

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Column, Row } from "../Layout/Flex";
import { Wrapper, ItemWrapper, ColorIndicator, ButtonsWrapper, ItemAdderWrapper, ButtonWrapper } from "./styles";
import { Palette } from "../../index";
import FadeIn from "react-fade-in";
import * as Icons from "../Icons";
const noAction = () => null;
const CRUD = ({
  items = [],
  onEdit = noAction,
  onRemove = noAction,
  onAdd = noAction,
  noun = "item",
  maxHeight = 300,
  width,
  selectable = false,
  selectedItem,
  onSelectItem = noAction,
  accentColor = Palette.WARNING_YELLOW
}) => {
  return _jsxs(Wrapper, {
    maxHeight: maxHeight,
    width: width,
    children: [items.map((item, i) => _jsx(FadeIn, {
      children: _jsxs(ItemWrapper, {
        selected: selectable && selectedItem && selectedItem.id === item.id,
        onClick: () => onSelectItem(item),
        accentColor: accentColor,
        children: [_jsx(Column, {
          children: _jsxs(Row, {
            children: [_jsx(ColorIndicator, {
              color: item.color
            }), _jsx(Column, {
              "data-testid": noun,
              style: {
                justifyContent: "flex-end"
              },
              children: item.text || item.name
            })]
          })
        }), _jsx(ButtonsWrapper, {
          children: _jsxs(Row, {
            children: [_jsx(ButtonWrapper, {
              onClick: () => onEdit(item),
              children: _jsx(Icons.SettingsIcon, {})
            }), _jsx(ButtonWrapper, {
              onClick: () => onRemove(item),
              children: _jsx(Icons.Close2Icon, {})
            })]
          })
        })]
      })
    }, i)), _jsx(FadeIn, {
      children: _jsxs(ItemAdderWrapper, {
        onClick: () => onAdd(),
        children: ["Add ", noun]
      })
    })]
  });
};
export default CRUD;