anvil/striker-ui/components/List.tsx

import {
  Add as MUIAddIcon,
  Delete,
  Done as MUIDoneIcon,
  Edit as MUIEditIcon,
} from '@mui/icons-material';
import {
  Box as MUIBox,
  List as MUIList,
  ListItem as MUIListItem,
  ListItemIcon as MUIListItemIcon,
  ListItemProps as MUIListItemProps,
  ListProps as MUIListProps,
  SxProps,
  Theme,
} from '@mui/material';
import { FC, ReactNode, useMemo } from 'react';
import { v4 as uuidv4 } from 'uuid';

import { BLUE, DIVIDER, GREY, RED } from '../lib/consts/DEFAULT_THEME';

import Checkbox, { CheckboxProps } from './Checkbox';
import FlexBox, { FlexBoxProps } from './FlexBox';
import IconButton, { IconButtonProps } from './IconButton';
import { BodyText } from './Text';

type ListOptionalProps<T = unknown> = {
  header?: ReactNode;
  isAllowAddItem?: boolean;
  isAllowCheckItem?: boolean;
  isAllowDelete?: boolean;
  isAllowEdit?: boolean;
  isAllowEditItem?: boolean;
  isEdit?: boolean;
  isScroll?: boolean;
  listItemKeyPrefix?: string;
  listItemProps?: MUIListItemProps;
  listProps?: MUIListProps;
  onAdd?: IconButtonProps['onClick'];
  onDelete?: IconButtonProps['onClick'];
  onEdit?: IconButtonProps['onClick'];
  onItemCheckboxChange?: CheckboxProps['onChange'];
  renderListItem?: (key: string, value: T) => ReactNode;
};

type ListProps<T = unknown> = FlexBoxProps &
  ListOptionalProps<T> & {
    listItems: Record<string, T>;
  };

const LIST_DEFAULT_PROPS: Required<
  Omit<
    ListOptionalProps,
    | 'header'
    | 'isAllowAddItem'
    | 'isAllowCheckItem'
    | 'isAllowDelete'
    | 'isAllowEditItem'
    | 'onAdd'
    | 'onDelete'
    | 'onEdit'
    | 'onItemCheckboxChange'
  >
> &
  Pick<
    ListOptionalProps,
    | 'header'
    | 'isAllowAddItem'
    | 'isAllowCheckItem'
    | 'isAllowDelete'
    | 'isAllowEditItem'
    | 'onAdd'
    | 'onDelete'
    | 'onEdit'
    | 'onItemCheckboxChange'
  > = {
  header: undefined,
  isAllowAddItem: undefined,
  isAllowCheckItem: undefined,
  isAllowDelete: undefined,
  isAllowEdit: false,
  isAllowEditItem: undefined,
  isEdit: false,
  isScroll: false,
  listItemKeyPrefix: uuidv4(),
  listItemProps: {},
  listProps: {},
  onAdd: undefined,
  onDelete: undefined,
  onEdit: undefined,
  onItemCheckboxChange: undefined,
  renderListItem: (key) => <BodyText>{key}</BodyText>,
};

const List = <T,>({
  header,
  isAllowEdit = LIST_DEFAULT_PROPS.isAllowEdit,
  isEdit = LIST_DEFAULT_PROPS.isEdit,
  isScroll = LIST_DEFAULT_PROPS.isScroll,
  listItemKeyPrefix = LIST_DEFAULT_PROPS.listItemKeyPrefix,
  listItemProps: {
    sx: listItemSx,
    ...restListItemProps
  } = LIST_DEFAULT_PROPS.listItemProps,
  listItems,
  listProps: { sx: listSx, ...restListProps } = LIST_DEFAULT_PROPS.listProps,
  onAdd,
  onDelete,
  onEdit,
  onItemCheckboxChange,
  renderListItem = LIST_DEFAULT_PROPS.renderListItem,
  // Input props that depend on other input props.
  isAllowAddItem = isAllowEdit,
  isAllowCheckItem = isAllowEdit,
  isAllowDelete = isAllowEdit,
  isAllowEditItem = isAllowEdit,

  ...rootProps
}: ListProps<T>): ReturnType<FC<ListProps<T>>> => {
  const addItemButton = useMemo(
    () =>
      isAllowAddItem ? (
        <IconButton onClick={onAdd} size="small">
          <MUIAddIcon />
        </IconButton>
      ) : undefined,
    [isAllowAddItem, onAdd],
  );
  const deleteItemButton = useMemo(
    () =>
      isEdit && isAllowDelete ? (
        <IconButton
          onClick={onDelete}
          size="small"
          sx={{
            backgroundColor: RED,
            color: GREY,

            '&:hover': { backgroundColor: `${RED}F0` },
          }}
        >
          <Delete />
        </IconButton>
      ) : undefined,
    [isAllowDelete, isEdit, onDelete],
  );
  const editItemButton = useMemo(() => {
    if (isAllowEditItem) {
      return (
        <IconButton onClick={onEdit} size="small">
          {isEdit ? <MUIDoneIcon sx={{ color: BLUE }} /> : <MUIEditIcon />}
        </IconButton>
      );
    }

    return undefined;
  }, [isAllowEditItem, isEdit, onEdit]);
  const headerElement = useMemo(
    () =>
      typeof header === 'string' ? (
        <FlexBox row spacing=".3em" sx={{ height: '2.4em' }}>
          <BodyText>{header}</BodyText>
          <MUIBox
            sx={{
              borderTopColor: DIVIDER,
              borderTopStyle: 'solid',
              borderTopWidth: '1px',
              flexGrow: 1,
            }}
          />
          {deleteItemButton}
          {editItemButton}
          {addItemButton}
        </FlexBox>
      ) : (
        header
      ),
    [addItemButton, deleteItemButton, editItemButton, header],
  );
  const listItemCheckbox = useMemo(
    () =>
      isEdit && isAllowCheckItem ? (
        <MUIListItemIcon>
          <Checkbox edge="start" onChange={onItemCheckboxChange} />
        </MUIListItemIcon>
      ) : undefined,
    [isAllowCheckItem, isEdit, onItemCheckboxChange],
  );
  const listItemElements = useMemo(
    () =>
      Object.entries(listItems).map(([key, value]) => (
        <MUIListItem
          {...restListItemProps}
          key={`${listItemKeyPrefix}-${key}`}
          sx={{ paddingLeft: 0, paddingRight: 0, ...listItemSx }}
        >
          {listItemCheckbox}
          {renderListItem(key, value)}
        </MUIListItem>
      )),
    [
      listItemCheckbox,
      listItemKeyPrefix,
      listItems,
      listItemSx,
      renderListItem,
      restListItemProps,
    ],
  );
  const listScrollSx: SxProps<Theme> | undefined = useMemo(
    () => (isScroll ? { maxHeight: '100%', overflowY: 'scroll' } : undefined),
    [isScroll],
  );

  return (
    <FlexBox spacing={0} {...rootProps}>
      {headerElement}
      <MUIList
        {...restListProps}
        sx={{ paddingBottom: 0, paddingTop: 0, ...listScrollSx, ...listSx }}
      >
        {listItemElements}
      </MUIList>
    </FlexBox>
  );
};

List.defaultProps = LIST_DEFAULT_PROPS;

export default List;