anvil/striker-ui/components/List.tsx

import {
  Add as MUIAddIcon,
  Delete as MUIDeleteIcon,
  Done as MUIDoneIcon,
  Edit as MUIEditIcon,
} from '@mui/icons-material';
import {
  Box as MUIBox,
  List as MUIList,
  ListItem as MUIListItem,
  ListItemIcon as MUIListItemIcon,
  SxProps,
  Theme,
} from '@mui/material';
import {
  FC,
  ForwardedRef,
  forwardRef,
  useCallback,
  useImperativeHandle,
  useMemo,
  useState,
} from 'react';
import { v4 as uuidv4 } from 'uuid';

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

import Checkbox from './Checkbox';
import Divider from './Divider';
import FlexBox from './FlexBox';
import IconButton from './IconButton';
import { BodyText } from './Text';

const List = forwardRef(
  <T,>(
    {
      allowCheckAll: isAllowCheckAll = false,
      allowEdit: isAllowEdit = false,
      edit: isEdit = false,
      flexBoxProps,
      header,
      headerSpacing = '.3em',
      initialCheckAll = false,
      insertHeader: isInsertHeader = true,
      listEmpty,
      listItemIconMinWidth = '56px',
      listItemKeyPrefix = uuidv4(),
      listItemProps: { sx: listItemSx, ...restListItemProps } = {},
      listItems,
      listProps: { sx: listSx, ...restListProps } = {},
      onAdd,
      onDelete,
      onEdit,
      onAllCheckboxChange,
      onItemCheckboxChange,
      renderListItem = (key) => <BodyText>{key}</BodyText>,
      renderListItemCheckboxState,
      scroll: isScroll = false,
      // Input props that depend on other input props.
      allowAddItem: isAllowAddItem = isAllowEdit,
      allowCheckItem: isAllowCheckItem = isAllowEdit,
      allowDelete: isAllowDelete = isAllowEdit,
      allowEditItem: isAllowEditItem = isAllowEdit,
    }: ListProps<T>,
    ref: ForwardedRef<ListForwardedRefContent>,
  ) => {
    const [isCheckAll, setIsCheckAll] = useState<boolean>(initialCheckAll);

    const checkAllMinWidth = useMemo(
      () => `calc(${listItemIconMinWidth} - ${headerSpacing})`,
      [headerSpacing, listItemIconMinWidth],
    );

    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` },
            }}
          >
            <MUIDeleteIcon />
          </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 checkAllElement = useMemo(() => {
      let element;

      if (isEdit && isAllowCheckItem) {
        element = isAllowCheckAll ? (
          <MUIBox sx={{ minWidth: checkAllMinWidth }}>
            <Checkbox
              checked={isCheckAll}
              edge="start"
              onChange={(...args) => {
                const [, isChecked] = args;

                onAllCheckboxChange?.call(null, ...args);
                setIsCheckAll(isChecked);
              }}
            />
          </MUIBox>
        ) : (
          <Divider sx={{ minWidth: checkAllMinWidth }} />
        );
      }

      return element;
    }, [
      checkAllMinWidth,
      isAllowCheckAll,
      isAllowCheckItem,
      isCheckAll,
      isEdit,
      onAllCheckboxChange,
    ]);
    const headerElement = useMemo(
      () =>
        isInsertHeader && header ? (
          <FlexBox row spacing={headerSpacing} sx={{ height: '2.4em' }}>
            {checkAllElement}
            {typeof header === 'string' ? (
              <>
                <BodyText>{header}</BodyText>
                <Divider sx={{ flexGrow: 1 }} />
              </>
            ) : (
              header
            )}
            {deleteItemButton}
            {editItemButton}
            {addItemButton}
          </FlexBox>
        ) : (
          header
        ),
      [
        addItemButton,
        checkAllElement,
        deleteItemButton,
        editItemButton,
        header,
        headerSpacing,
        isInsertHeader,
      ],
    );
    const listEmptyElement = useMemo(
      () =>
        typeof listEmpty === 'string' ? (
          <BodyText>{listEmpty}</BodyText>
        ) : (
          listEmpty
        ),
      [listEmpty],
    );

    const listItemCheckbox = useCallback(
      (key: string, checked?: boolean) =>
        isEdit && isAllowCheckItem ? (
          <MUIListItemIcon sx={{ minWidth: listItemIconMinWidth }}>
            <Checkbox
              checked={checked}
              edge="start"
              onChange={(...args) =>
                onItemCheckboxChange?.call(null, key, ...args)
              }
            />
          </MUIListItemIcon>
        ) : undefined,
      [isAllowCheckItem, isEdit, listItemIconMinWidth, onItemCheckboxChange],
    );

    const listItemElements = useMemo(() => {
      let result = listEmptyElement;

      if (listItems) {
        const entries = Object.entries(listItems);

        if (entries.length > 0) {
          result = entries.map(([key, value]) => (
            <MUIListItem
              {...restListItemProps}
              key={`${listItemKeyPrefix}-${key}`}
              sx={{ paddingLeft: 0, paddingRight: 0, ...listItemSx }}
            >
              {listItemCheckbox(
                key,
                renderListItemCheckboxState?.call(null, key, value),
              )}
              {renderListItem(key, value)}
            </MUIListItem>
          ));
        }
      }

      return result;
    }, [
      listEmptyElement,
      listItemCheckbox,
      listItemKeyPrefix,
      listItems,
      listItemSx,
      renderListItem,
      renderListItemCheckboxState,
      restListItemProps,
    ]);
    const listScrollSx: SxProps<Theme> | undefined = useMemo(
      () => (isScroll ? { maxHeight: '100%', overflowY: 'scroll' } : undefined),
      [isScroll],
    );

    useImperativeHandle(
      ref,
      () => ({
        setCheckAll: (value) => setIsCheckAll(value),
      }),
      [],
    );

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

List.displayName = 'List';

export default List as <T>(
  props: ListProps<T> & { ref?: ForwardedRef<ListForwardedRefContent> },
) => ReturnType<FC<ListProps<T>>>;