diff --git a/striker-ui/components/List.tsx b/striker-ui/components/List.tsx index 9898c369..cfc0e079 100644 --- a/striker-ui/components/List.tsx +++ b/striker-ui/components/List.tsx @@ -33,6 +33,7 @@ type ListOptionalProps = { isAllowEditItem?: boolean; isEdit?: boolean; isScroll?: boolean; + listEmpty?: ReactNode; listItemKeyPrefix?: string; listItemProps?: MUIListItemProps; listProps?: MUIListProps; @@ -56,6 +57,7 @@ const LIST_DEFAULT_PROPS: Required< | 'isAllowCheckItem' | 'isAllowDelete' | 'isAllowEditItem' + | 'listEmpty' | 'onAdd' | 'onDelete' | 'onEdit' @@ -69,6 +71,7 @@ const LIST_DEFAULT_PROPS: Required< | 'isAllowCheckItem' | 'isAllowDelete' | 'isAllowEditItem' + | 'listEmpty' | 'onAdd' | 'onDelete' | 'onEdit' @@ -82,6 +85,7 @@ const LIST_DEFAULT_PROPS: Required< isAllowEditItem: undefined, isEdit: false, isScroll: false, + listEmpty: undefined, listItemKeyPrefix: uuidv4(), listItemProps: {}, listProps: {}, @@ -97,6 +101,7 @@ const List = ({ isAllowEdit = LIST_DEFAULT_PROPS.isAllowEdit, isEdit = LIST_DEFAULT_PROPS.isEdit, isScroll = LIST_DEFAULT_PROPS.isScroll, + listEmpty = LIST_DEFAULT_PROPS.listEmpty, listItemKeyPrefix = LIST_DEFAULT_PROPS.listItemKeyPrefix, listItemProps: { sx: listItemSx, @@ -177,6 +182,15 @@ const List = ({ ), [addItemButton, deleteItemButton, editItemButton, header], ); + const listEmptyElement = useMemo( + () => + typeof listEmpty === 'string' ? ( + {listEmpty} + ) : ( + listEmpty + ), + [listEmpty], + ); const listItemCheckbox = useMemo( () => isEdit && isAllowCheckItem ? ( @@ -186,27 +200,30 @@ const List = ({ ) : undefined, [isAllowCheckItem, isEdit, onItemCheckboxChange], ); - const listItemElements = useMemo( - () => - Object.entries(listItems).map(([key, value]) => ( - - {listItemCheckbox} - {renderListItem(key, value)} - - )), - [ - listItemCheckbox, - listItemKeyPrefix, - listItems, - listItemSx, - renderListItem, - restListItemProps, - ], - ); + const listItemElements = useMemo(() => { + const entries = Object.entries(listItems); + + return entries.length > 0 + ? entries.map(([key, value]) => ( + + {listItemCheckbox} + {renderListItem(key, value)} + + )) + : listEmptyElement; + }, [ + listEmptyElement, + listItemCheckbox, + listItemKeyPrefix, + listItems, + listItemSx, + renderListItem, + restListItemProps, + ]); const listScrollSx: SxProps | undefined = useMemo( () => (isScroll ? { maxHeight: '100%', overflowY: 'scroll' } : undefined), [isScroll],