fix: listing and tabs styles vh usage (#23)

* fix: listing and tabs vh usage * fix: changed heightt for tabs wrapper * fix(Listing): fix invalid height * fix(Tabs): fix height * feat(Notification): use useCallback to prevent generating new function on every render --------- Co-authored-by: Lifosmin Simon <lifosmin> Co-authored-by: Stewart Jingga <[email protected]>
goto · Jan 3, 2024 · ced0abc · ced0abc
1 parent e3ac12d
commit ced0abc
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 74 deletions.
diff --git a/packages/apsara-ui/src/Listing/Listing.stories.tsx b/packages/apsara-ui/src/Listing/Listing.stories.tsx
@@ -20,66 +20,65 @@ function getData(page = 1): User[] {
         return {
             key: index,
             name: `name ${index}`,
-            status: index%2 ? "active" : "inactive",
+            status: index % 2 ? "active" : "inactive",
             age: index,
             address: `A${index} Downing Street`,
         };
     });
 }
 
-const data = getData(1);
-
 export const listing = () => (
-    <Listing<User>
-        loading={false}
-        sortable
-        defaultSearchTerm="name 1"
-        list={data}
-        tableProps={{
-            getColumnList: () => {
-                return [
-                    {
-                        title: "Name",
-                        key: "name",
-                        render: ({ row: { original } }) => original.name,
-                    },
-                    {
-                        title: "Status",
-                        key: "status",
-                        render: ({ row: { original } }) => original.status,
-                    },
-                    {
-                        title: "Age",
-                        key: "age",
-                        render: ({ row: { original } }) => original.age,
-                    },
+    <div style={{ height: '720px' }}>
+        <h4>Listing</h4>
+        <Listing<User>
+            loading={false}
+            sortable
+            defaultSearchTerm="name 1"
+            list={getData(2)}
+            tableProps={{
+                getColumnList: () => {
+                    return [
+                        {
+                            title: "Name",
+                            key: "name",
+                            render: ({ row: { original } }) => original.name,
+                        },
+                        {
+                            title: "Status",
+                            key: "status",
+                            render: ({ row: { original } }) => original.status,
+                        },
+                        {
+                            title: "Age",
+                            key: "age",
+                            render: ({ row: { original } }) => original.age,
+                        },
+                        {
+                            title: "Address",
+                            key: "address",
+                            render: ({ row: { original } }) => original.address,
+                        },
+                    ];
+                },
+            }}
+            filterProps={{
+                filterFieldList: [
                     {
-                        title: "Address",
-                        key: "address",
-                        render: ({ row: { original } }) => original.address,
+                        name: "Status",
+                        data: [
+                            { label: "Active", value: "active" },
+                            { label: "Inactive", value: "inactive" },
+                        ],
+                        slug: "status",
+                        multi: true,
                     },
-                ];
-            },
-            scroll: { y: 300, x: "100vw" },
-        }}
-        filterProps={{
-            filterFieldList: [
-                {
-                    name: "Status",
-                    data: [
-                        { label: "Active", value: "active" },
-                        { label: "Inactive", value: "inactive" },
-                    ],
-                    slug: "status",
-                    multi: true,
-                },
-            ],
-        }}
-        searchProps={{
-            searchFields: ["name", "address"],
-        }}
-        resourcePath="/beast"
-    />
+                ],
+            }}
+            searchProps={{
+                searchFields: ["name", "address"],
+            }}
+        />
+    </div>
 );
 
 export const infiniteListing = () => {

diff --git a/packages/apsara-ui/src/Listing/Listing.styles.tsx b/packages/apsara-ui/src/Listing/Listing.styles.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import Search, { SearchProps } from "../Search/Search";
 
 export const ListingWrapper = styled.div`
-    height: 100vh;
+    height: 100%;
     .virtual-table-row-hover {
         background: ${({ theme }) => theme?.listing?.tableHighlight} !important;
     }

diff --git a/packages/apsara-ui/src/Listing/Listing.tsx b/packages/apsara-ui/src/Listing/Listing.tsx
@@ -24,7 +24,7 @@ function Listing<T>({
     onChangeCallback,
     loading = false,
 }: ListingProps<T>) {
-    const { getColumnList = () => [], selectedRowId, ...extraTableProps } = tableProps;
+    const { getColumnList = () => [], ...extraTableProps } = tableProps;
     const { searchFields = [], disabled = false, searchPlaceholder } = searchProps;
     const { filterFieldList } = filterProps;
     const {
@@ -67,13 +67,13 @@ function Listing<T>({
             <VirtualisedTable
                 items={filteredList}
                 columnsData={columns}
-                selectedRowId={selectedRowId}
                 rowClick={rowClick}
                 calculateRowHeight={calculateRowHeight}
                 calculateColumnWidth={calculateColumnWidth}
                 sortable={sortable}
                 {...extraTableProps}
                 loading={loading}
+                height="calc(100% - 50px)"
             />
         );
     }

diff --git a/packages/apsara-ui/src/Notification/Notification.tsx b/packages/apsara-ui/src/Notification/Notification.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useCallback, useContext, useState } from "react";
 
 import Icon from "../Icon";
 import {
@@ -32,12 +32,12 @@ export const useNotification = () => {
 
 export const NotificationProvider = ({ children }: any) => {
     const [toasts, setToasts] = useState<Notification[]>([]);
-
-    const showNotification = (toast: Notification) => {
+    
+    const showNotification = useCallback((toast: Notification) => {
         setToasts([...toasts, { ...toast, id: uuid() }]);
-    };
+    }, [toasts, setToasts]);
 
-    const showSuccess = (title: string, content?: string) => {
+    const showSuccess = useCallback((title: string, content?: string) => {
         setToasts([
             ...toasts,
             {
@@ -47,9 +47,9 @@ export const NotificationProvider = ({ children }: any) => {
                 icon: <Icon name="checkcircle" color="green" size={32} />,
             },
         ]);
-    };
+    }, [toasts, setToasts]);
 
-    const showError = (title: string, content?: string) => {
+    const showError = useCallback((title: string, content?: string) => {
         setToasts([
             ...toasts,
             {
@@ -59,7 +59,7 @@ export const NotificationProvider = ({ children }: any) => {
                 icon: <Icon name="error" color="red" size={32} />,
             },
         ]);
-    };
+    }, [toasts, setToasts]);
 
     return (
         <NotificationContext.Provider
@@ -105,12 +105,9 @@ export const NotificationProvider = ({ children }: any) => {
 };
 
 const NotificationContext = createContext<Notifier>({
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    showNotification: (_toast: Notification) => null,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    showSuccess: (_title: string, _content?: string) => null,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    showError: (_title: string, _content?: string) => null,
+    showNotification: (_toast: Notification) => {},
+    showSuccess: (_title: string, _content?: string) => {},
+    showError: (_title: string, _content?: string) => {},
 });
 
 const uuid = () => {

diff --git a/packages/apsara-ui/src/TableV2/Table.styles.tsx b/packages/apsara-ui/src/TableV2/Table.styles.tsx
@@ -1,7 +1,14 @@
 import styled from "styled-components";
 import { textStyles } from "../mixin";
 
-export const StyledTable = styled.div`
+export const StyledTable = styled.div<{
+    height?: string;
+  }>`
+    ${({ height }) => height && `
+        height: ${height};
+    `}
+    overflow-y: auto;
+    
     table {
         background: transparent;
         background-color: ${({ theme }) => theme?.table?.bg};

diff --git a/packages/apsara-ui/src/TableV2/Table.tsx b/packages/apsara-ui/src/TableV2/Table.tsx
@@ -34,6 +34,7 @@ interface ITableProps {
     dataFetchFunction?: (options: { pageIndex?: number; pageSize?: number }) => any;
     rowClick?: (props: any) => any;
     isLoading?: boolean;
+    height?: string;
 }
 
 function Table({
@@ -47,6 +48,7 @@ function Table({
     setPage,
     dataFetchFunction,
     rowClick,
+    height,
     isLoading = false,
     alternate = false,
     alternateHover = false,
@@ -143,7 +145,7 @@ function Table({
     };
 
     return (
-        <StyledTable className={`${alternate ? "alternate" : ""} ${alternateHover ? "alternate-hover" : ""}`}>
+        <StyledTable className={`${alternate ? "alternate" : ""} ${alternateHover ? "alternate-hover" : ""}`} height={height}>
             <TableWrapper className="apsara-table-content">
                 <table>
                     <thead>

diff --git a/packages/apsara-ui/src/TableV2/VirtualisedTable.tsx b/packages/apsara-ui/src/TableV2/VirtualisedTable.tsx
@@ -27,6 +27,7 @@ interface ITableProps {
     rowClick?: (props: any) => any;
     dataFetchFunction?: (options: { pageIndex?: number; pageSize?: number }) => any;
     loading?: boolean;
+    height?: string;
 }
 
 type RenderFunction<T, U = T> = (props: { row: { original: U } }) => any;
@@ -48,6 +49,7 @@ function VirtualisedTable({
     rowClick,
     dataFetchFunction,
     items,
+    height,
     loading = false,
 }: ITableProps) {
     useEffect(() => {
@@ -108,7 +110,7 @@ function VirtualisedTable({
         );
     } else {
         return (
-            <StyledTable>
+            <StyledTable height={height}>
                 <TableWrapper ref={tableContainerRef} className="container">
                     <table>
                         <thead>

diff --git a/packages/apsara-ui/src/Tabs/Tabs.stories.mdx b/packages/apsara-ui/src/Tabs/Tabs.stories.mdx
@@ -31,7 +31,7 @@ import Button from "../Button";
             type: "primary",
             tabContent: [
                 { value: "tabs1", content: "Tabs1", title: "tabs1" },
-                { value: "tabs2", content: "Tabs2", title: "tabs2" },
+                { value: "tabs2", content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", title: "Long Content" },
                 { value: "tabs3", content: "Tabs3", title: "tabs3", disabled: true },
                 { value: "tabs4", content: "Tabs4", title: "tabs4" },
             ],

diff --git a/packages/apsara-ui/src/Tabs/Tabs.styles.tsx b/packages/apsara-ui/src/Tabs/Tabs.styles.tsx
@@ -6,9 +6,10 @@ const StyledTabs = styled(TabsPrimitive.Root)`
     display: flex;
     flex-direction: column;
     width: 100%;
+    height: 100%;
+    overflow-y: auto;
     [role="tabpanel"] {
-        overflow-y: auto;
-        height: calc(100vh - 0px);
+        height: 100%
     }
 `;