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,27 +200,30 @@ const List = <T,>({
       ) : undefined,
     [isAllowCheckItem, isEdit, onItemCheckboxChange],
   );
-  const listItemElements = useMemo(
+  const listItemElements = useMemo(() => {
-    () =>
+    const entries = Object.entries(listItems);
-      Object.entries(listItems).map(([key, value]) => (
+
-        <MUIListItem
+    return entries.length > 0
-          {...restListItemProps}
+      ? entries.map(([key, value]) => (
-          key={`${listItemKeyPrefix}-${key}`}
+          <MUIListItem
-          sx={{ paddingLeft: 0, paddingRight: 0, ...listItemSx }}
+            {...restListItemProps}
-        >
+            key={`${listItemKeyPrefix}-${key}`}
-          {listItemCheckbox}
+            sx={{ paddingLeft: 0, paddingRight: 0, ...listItemSx }}
-          {renderListItem(key, value)}
+          >
-        </MUIListItem>
+            {listItemCheckbox}
-      )),
+            {renderListItem(key, value)}
-    [
+          </MUIListItem>
-      listItemCheckbox,
+        ))
-      listItemKeyPrefix,
+      : listEmptyElement;
-      listItems,
+  }, [
-      listItemSx,
+    listEmptyElement,
-      renderListItem,
+    listItemCheckbox,
-      restListItemProps,
+    listItemKeyPrefix,
-    ],
+    listItems,
-  );
+    listItemSx,
+    renderListItem,
+    restListItemProps,
+  ]);
   const listScrollSx: SxProps<Theme> | undefined = useMemo(
     () => (isScroll ? { maxHeight: '100%', overflowY: 'scroll' } : undefined),
     [isScroll],