fix: listing, tooltip and button components (#2)

* fix(listing): migrate listing component to tableV2 component * fix(listing): remove unused class * fix(listing): remove unused class * fix(tooltip): fix width and alignment of tooltip * fix(tooltip): implement tooltip with radix-ui * fix(tooltip): allow configurable color and backgroundColor * fix(button): set default button type to button * fix(button): added htmlType prop for button
goto · Mar 31, 2023 · 85a0462 · 85a0462
1 parent 69a1ffa
commit 85a0462
Show file tree

Hide file tree

Showing 16 changed files with 310 additions and 334 deletions.
diff --git a/packages/apsara-ui/package.json b/packages/apsara-ui/package.json
@@ -51,6 +51,7 @@
         "@radix-ui/react-collapsible": "^1.0.0",
         "@radix-ui/react-avatar": "^1.0.0",
         "@radix-ui/react-dropdown-menu": "^1.0.0",
+        "@radix-ui/react-tooltip":"^1.0.0",
         "@tanstack/react-table": "8.5.13",
         "react-query": "3.39.2",
         "react-virtual": "^2.10.4",

diff --git a/packages/apsara-ui/src/Button/Button.tsx b/packages/apsara-ui/src/Button/Button.tsx
@@ -27,6 +27,7 @@ const Button = ({
     shape = "round",
     onClick = () => null,
     href = "",
+    htmlType = "button",
     ...props
 }: CustomButtonProps) => {
     const IconComponent = () => {
@@ -46,6 +47,7 @@ const Button = ({
         <StyledButton role="button" type={type} size={size} block={block} shape={shape}>
             {!href && (
                 <button
+                    type={htmlType || "button"}
                     disabled={disabled}
                     onClick={(e) => {
                         onClick(e);

diff --git a/packages/apsara-ui/src/Button/Button.types.tsx b/packages/apsara-ui/src/Button/Button.types.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { CustomIconProps, IconName } from "../Icon/Icon";
-
+import { TooltipPlacement } from "../Tooltip/Tooltip";
 const ButtonTypes = ["default", "primary", "ghost", "dashed", "link", "text"] as const;
 export type ButtonType = typeof ButtonTypes[number];
 const ButtonShapes = ["default", "circle", "round"] as const;
@@ -42,20 +42,6 @@ export type NativeButtonProps = {
 
 export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>;
 
-export type TooltipPlacement =
-    | "top"
-    | "left"
-    | "right"
-    | "bottom"
-    | "topLeft"
-    | "topRight"
-    | "bottomLeft"
-    | "bottomRight"
-    | "leftTop"
-    | "leftBottom"
-    | "rightTop"
-    | "rightBottom";
-
 export type CustomButtonProps = Omit<ButtonProps, "type"> & {
     /**
      * Defines the type of the button. It affects the button color

diff --git a/packages/apsara-ui/src/FormBuilder/FormBuilderItems.tsx b/packages/apsara-ui/src/FormBuilder/FormBuilderItems.tsx
@@ -279,7 +279,7 @@ const FormBuilderItems = (props: FormBuilderItemsProps) => {
     );
 };
 
-export const FormBuilderToolTip = ({ placement = "rightTop", tooltip, children, ...props }: any) => {
+export const FormBuilderToolTip = ({ placement = "right", tooltip, children, ...props }: any) => {
     const renderFormItem = (
         <div className="custom-form-field">
             <FormBuilderField {...props} />

diff --git a/packages/apsara-ui/src/Listing/Filters/index.tsx b/packages/apsara-ui/src/Listing/Filters/index.tsx
@@ -15,6 +15,7 @@ import {
     StyledBadge,
 } from "./Filters.styles";
 import Button from "../../Button";
+import Input from "../../Input";
 
 const renderFilterList = ({
     filterFieldList,
@@ -27,32 +28,51 @@ const renderFilterList = ({
     return (
         <FilterPopup>
             <FilterBody>
-                {filterFieldList.map((group: any) => (
-                    <FilterColumn key={group.name}>
-                        <FilterTitle>{group.name}</FilterTitle>
-                        <div>
-                            <Checkbox.Group
-                                value={filteredFieldData[group.slug] || []}
-                                onChange={(args: any) => onGroupFilter(group, args)}
-                                options={group.data}
-                                orientation="vertical"
-                            />
-                        </div>
-                    </FilterColumn>
-                ))}
+                {filterFieldList.map((group: any) =>
+                    renderFilterBodyColumn({ group, filteredFieldData, onGroupFilter }),
+                )}
             </FilterBody>
             <FilterFooter>
                 <span onClick={onClearGroupFilter} className={`clear-btn ${filteredFieldDataLength ? "" : "disabled"}`}>
                     Clear All Filters
                 </span>
-                {onApplyClick &&
-                    <Button type="default" onClick={onApplyClick} className="apply-btn">Apply</Button>
-                }
+                {onApplyClick && (
+                    <Button type="default" onClick={onApplyClick} className="apply-btn">
+                        Apply
+                    </Button>
+                )}
             </FilterFooter>
         </FilterPopup>
     );
 };
 
+const renderFilterBodyColumn = ({ group, filteredFieldData, onGroupFilter }: any) => {
+    const [filterSearch, setFilterSearch] = useState("");
+    return (
+        <FilterColumn key={group.name}>
+            <FilterTitle>{group.name}</FilterTitle>
+            {group.searchEnabled && (
+                <Input
+                    size="small"
+                    onChange={(e: any) => setFilterSearch(e.target.value)}
+                    placeholder="search"
+                    value={filterSearch[group.name]}
+                ></Input>
+            )}
+            <div>
+                <Checkbox.Group
+                    value={filteredFieldData[group.slug] || []}
+                    onChange={(args: any) => onGroupFilter(group, args)}
+                    options={group.data.filter((option: any) =>
+                        option.label.toLowerCase().match(filterSearch.toLowerCase()),
+                    )}
+                    orientation="vertical"
+                />
+            </div>
+        </FilterColumn>
+    );
+};
+
 const Filters = ({ filteredFieldData, label = "Filters", disabled = false, ...props }: any) => {
     const [open, setOpen] = useState(false);
     const filteredFieldDataLength = Object.keys(filteredFieldData).reduce((acc, key) => {
@@ -63,10 +83,10 @@ const Filters = ({ filteredFieldData, label = "Filters", disabled = false, ...pr
         <StyledPopover open={open} onOpenChange={(open) => setOpen(open)}>
             <PopoverTrigger asChild>
                 <span aria-label="Update dimensions">
-                    <StyledBadge dot={!!filteredFieldDataLength} >
+                    <StyledBadge dot={!!filteredFieldDataLength}>
                         <FilterButton type="default" disabled={disabled}>
                             {label}
-                            {open ? <CaretUpIcon/> :  <CaretDownIcon/>}
+                            {open ? <CaretUpIcon /> : <CaretDownIcon />}
                         </FilterButton>
                     </StyledBadge>
                 </span>

diff --git a/packages/apsara-ui/src/Listing/Listing.stories.tsx b/packages/apsara-ui/src/Listing/Listing.stories.tsx
@@ -21,6 +21,7 @@ function getData(page = 1) {
 export const listing = () => (
     <Listing
         loading={false}
+        sortable
         list={new Array(100).fill(0).map((_, index) => {
             return {
                 id: index,
@@ -61,6 +62,7 @@ export const listing = () => (
                     }),
                     slug: "class",
                     multi: false,
+                    searchEnabled: true,
                 },
                 {
                     name: "Is Even",

diff --git a/packages/apsara-ui/src/Listing/Listing.tsx b/packages/apsara-ui/src/Listing/Listing.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 import React from "react";
 import Filters from "./Filters";
-import VirtualisedTable from "../Table/VirtualisedTable";
+import VirtualisedTable from "../TableV2/VirtualisedTable";
 import useSearchFilter from "./hooks/useSearchFilter";
 import { ListingProps } from "./Listing.types";
 import { ListingSearch, ListingWrapper } from "./Listing.styles";
@@ -19,15 +19,16 @@ const Listing = ({
     resourcePath = "/",
     calculateRowHeight,
     calculateColumnWidth,
+    rowClick,
+    sortable = false,
 }: ListingProps) => {
-    const { getColumnList = () => [], handleRowClick = () => null, selectedRowId, ...extraTableProps } = tableProps;
+    const { getColumnList = () => [], selectedRowId, ...extraTableProps } = tableProps;
     const { searchFields = [], disabled = false, searchPlaceholder, ...extraSearchProps } = searchProps;
     const { filterFieldList } = filterProps;
     const {
         searchTerm,
         sortedInfo,
         setSearchTerm,
-        setSortedInfo,
         onGroupFilter,
         onClearGroupFilter,
         filteredList,
@@ -62,13 +63,13 @@ const Listing = ({
         renderBody = (
             <VirtualisedTable
                 items={filteredList}
-                columns={columns}
+                columnsData={columns}
                 rowKey={rowKey}
                 selectedRowId={selectedRowId}
-                onChange={(_pagination, _filters, sorter) => setSortedInfo(sorter)}
-                onRowClick={handleRowClick}
+                rowClick={rowClick}
                 calculateRowHeight={calculateRowHeight}
                 calculateColumnWidth={calculateColumnWidth}
+                sortable={sortable}
                 {...extraTableProps}
             />
         );

diff --git a/packages/apsara-ui/src/Listing/Listing.types.tsx b/packages/apsara-ui/src/Listing/Listing.types.tsx
@@ -23,13 +23,16 @@ export interface ListingProps {
     renderBody?: any;
     calculateRowHeight?: any;
     calculateColumnWidth?: any;
+    rowClick?: (props: any) => any;
+    sortable?: boolean;
 }
 
 export interface IGroupOptions {
     name: string;
     slug: string;
     multi?: boolean;
     data: { label: string; value: string }[];
+    searchEnabled?: boolean;
 }
 
 export interface ILoadMoreProps {

diff --git a/packages/apsara-ui/src/Popover/Popover.styles.tsx b/packages/apsara-ui/src/Popover/Popover.styles.tsx
@@ -42,6 +42,7 @@ export const StyledContent = styled(PopoverPrimitive.Content)`
     border-radius: 4px;
     padding: 20px;
     width: max-content;
+    z-index: 999;
     background-color: white;
     box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
     @media (prefers-reduced-motion: no-preference) {

diff --git a/packages/apsara-ui/src/Table/TableProps.tsx b/packages/apsara-ui/src/Table/TableProps.tsx
@@ -3,6 +3,7 @@ import type { ColumnType as RcColumnType, FixedType, RenderedCell as RcRenderedC
 import type { PaginationProps as RcPaginationProps } from "rc-pagination";
 import type { TooltipProps as RcTooltipProps } from "rc-tooltip/lib/Tooltip";
 import type { placements as Placements } from "rc-tooltip/lib/placements";
+import { TooltipPlacement } from "../Tooltip/Tooltip";
 
 export type SortOrder = "descend" | "ascend" | null;
 export type Key = React.Key;
@@ -307,19 +308,6 @@ export interface AdjustOverflow {
     adjustX?: 0 | 1;
     adjustY?: 0 | 1;
 }
-export type TooltipPlacement =
-    | "top"
-    | "left"
-    | "right"
-    | "bottom"
-    | "topLeft"
-    | "topRight"
-    | "bottomLeft"
-    | "bottomRight"
-    | "leftTop"
-    | "leftBottom"
-    | "rightTop"
-    | "rightBottom";
 export interface AbstractTooltipProps extends LegacyTooltipProps {
     style?: React.CSSProperties;
     className?: string;

diff --git a/packages/apsara-ui/src/TableV2/Table.styles.tsx b/packages/apsara-ui/src/TableV2/Table.styles.tsx
@@ -36,6 +36,25 @@ export const StyledTable = styled.div`
         text-transform: capitalize;
     }
 
+    .virtual-table-cell{
+        align-items: center;
+        height: 48px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        background: transparent;
+
+        a:not(.apsara-btn) {
+            display: block;
+            color: inherit;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            padding: 13px 16px;
+            margin: -13px -16px;
+        }
+    }
+
     &.alternate {
         tbody tr:nth-child(odd),
         .virtual-table-odd {