style: ui for no data in table list

2025-10-16 11:11:39 +08:00
parent ca9ceda2f7
commit e2da7c5f96
29 changed files with 546 additions and 108 deletions
@@ -0,0 +1,108 @@
+import { Empty, EmptyProps, Typography } from 'antd';
+import _ from 'lodash';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+const StyledEmpty = styled(Empty)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-block: 60px 32px;
+  .ant-empty-image {
+    margin-bottom: 0;
+    height: auto;
+    line-height: 1;
+    font-size: 42px;
+    .anticon {
+      color: var(--ant-color-primary);
+    }
+  }
+  .ant-empty-footer {
+    display: flex;
+  }
+`;
+
+const ImageWrapper = styled.div`
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const SimpleImageWrapper = styled.div`
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Description = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const NoResult: React.FC<
+  EmptyProps & {
+    title?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    noFoundText?: React.ReactNode;
+    filters?: Record<string, any>;
+    loading?: boolean;
+    loadend?: boolean;
+    dataSource?: any[];
+  }
+> = (props) => {
+  const { filters, noFoundText, loadend, loading, dataSource } = props;
+
+  const hasFilters = useMemo(() => {
+    const filterValues = _.omit(filters, ['page', 'perPage']);
+
+    return Object.values(filterValues || {}).some((value) => {
+      if (Array.isArray(value)) {
+        return value.length > 0;
+      }
+
+      return !!value;
+    });
+  }, [filters]);
+
+  return (
+    <>
+      {!loading && loadend && !dataSource?.length ? (
+        <StyledEmpty
+          image={
+            hasFilters ? (
+              <SimpleImageWrapper>
+                {Empty.PRESENTED_IMAGE_SIMPLE}
+              </SimpleImageWrapper>
+            ) : (
+              <ImageWrapper>{props.image}</ImageWrapper>
+            )
+          }
+          description={
+            <Description>
+              {!hasFilters && (
+                <Typography.Text style={{ fontSize: '18px', fontWeight: 500 }}>
+                  {props.title}
+                </Typography.Text>
+              )}
+              <Typography.Text type="secondary">
+                {hasFilters ? noFoundText : props.subTitle}
+              </Typography.Text>
+            </Description>
+          }
+        >
+          {!hasFilters && props.children}
+        </StyledEmpty>
+      ) : (
+        <span></span>
+      )}
+    </>
+  );
+};
+
+export default NoResult;