fix(striker-ui): add render when List is empty

striker-ui/components/List.tsx

@@ -33,6 +33,7 @@ type ListOptionalProps<T = unknown> = {
   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 = <T,>({
   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 = <T,>({
       ),
     [addItemButton, deleteItemButton, editItemButton, header],
   );
+  const listEmptyElement = useMemo(
+    () =>
+      typeof listEmpty === 'string' ? (
+        <BodyText>{listEmpty}</BodyText>
+      ) : (
+        listEmpty
+      ),
+    [listEmpty],
+  );
   const listItemCheckbox = useMemo(
     () =>
       isEdit && isAllowCheckItem ? (
@@ -186,9 +200,11 @@ const List = <T,>({
       ) : undefined,
     [isAllowCheckItem, isEdit, onItemCheckboxChange],
   );
-  const listItemElements = useMemo(
-    () =>
-      Object.entries(listItems).map(([key, value]) => (
+  const listItemElements = useMemo(() => {
+    const entries = Object.entries(listItems);
+
+    return entries.length > 0
+      ? entries.map(([key, value]) => (
           <MUIListItem
             {...restListItemProps}
             key={`${listItemKeyPrefix}-${key}`}
@@ -197,16 +213,17 @@ const List = <T,>({
             {listItemCheckbox}
             {renderListItem(key, value)}
           </MUIListItem>
-      )),
-    [
+        ))
+      : listEmptyElement;
+  }, [
+    listEmptyElement,
     listItemCheckbox,
     listItemKeyPrefix,
     listItems,
     listItemSx,
     renderListItem,
     restListItemProps,
-    ],
-  );
+  ]);
   const listScrollSx: SxProps<Theme> | undefined = useMemo(
     () => (isScroll ? { maxHeight: '100%', overflowY: 'scroll' } : undefined),
     [isScroll],