♻️ refactor(empty): Content

packages/ui/src/empty.tsx

@@ -1,4 +1,4 @@
-export default function Empty() {
+export default function Empty({ description }: { description?: React.ReactNode }) {
   return (
     <div className='flex flex-col items-center justify-center p-6 py-16'>
       <svg
@@ -21,6 +21,7 @@ export default function Empty() {
           </g>
         </g>
       </svg>
+      <p className='mt-6 text-center text-gray-500'>{description}</p>
     </div>
   );
 }

packages/ui/src/pro-list/pro-list.tsx

@@ -38,6 +38,7 @@ export interface ProListProps<TData, TValue> {
     textPageOf: (current: number, total: number) => string;
     selectedRowsText: (total: number) => string;
   }>;
+  empty?: React.ReactNode;
 }
 export interface ProListActions {
   refresh: () => void;
@@ -52,6 +53,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
   renderItem,
   action,
   texts,
+  empty,
 }: ProListProps<TData, TValue>) {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [rowSelection, setRowSelection] = useState<{ [key: number]: boolean }>({});
@@ -187,9 +189,7 @@ export function ProList<TData, TValue extends Record<string, unknown>>({
               return <div key={index}>{renderItem(item, checkbox)}</div>;
             })
           ) : (
-            <div className='flex items-center justify-center py-24'>
-              <Empty />
-            </div>
+            <div className='flex items-center justify-center py-24'>{empty || <Empty />}</div>
           )}
         </div>
 

packages/ui/src/pro-table/pro-table.tsx

@@ -52,6 +52,7 @@ export interface ProTableProps<TData, TValue> {
     textPageOf: (current: number, total: number) => string;
     selectedRowsText: (total: number) => string;
   }>;
+  empty?: React.ReactNode;
 }
 export interface ProTableActions {
   refresh: () => void;
@@ -66,6 +67,7 @@ export function ProTable<TData, TValue extends Record<string, unknown>>({
   actions,
   action,
   texts,
+  empty,
 }: ProTableProps<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -240,7 +242,7 @@ export function ProTable<TData, TValue extends Record<string, unknown>>({
             ) : (
               <TableRow>
                 <TableCell colSpan={columns.length + 2} className='py-24'>
-                  <Empty />
+                  {empty || <Empty />}
                 </TableCell>
               </TableRow>
             )}