@licklist/design 0.44.488 → 0.44.490

package/src/table/ReactTableHelperComponent.tsx

@@ -0,0 +1,321 @@
+import React, {
+  useEffect,
+  useMemo,
+  forwardRef,
+  useImperativeHandle,
+  Ref,
+  ReactElement,
+} from "react";
+import { Col, Row, Table } from "react-bootstrap";
+import { useLocation } from "react-router-dom";
+import { isEqual } from "lodash";
+import clsx from "clsx";
+import {
+  useReactTable,
+  ColumnDefResolved,
+  getCoreRowModel,
+} from "@tanstack/react-table";
+import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
+import TableService from "@licklist/plugins/dist/services/Table/TableService";
+import { LoaderIndicator } from "../static/loader/LoaderIndicator";
+import { FilterHelperComponent } from "./FilterHelperComponent";
+import { PaginationHelperComponent } from "./PaginationHelperComponent";
+import { PerPageHelperComponent } from "./PerPageHelperComponent";
+import { flexRender } from "./utils";
+import {
+  TableComponentProps,
+  TableComponentPropsWithOldTableData,
+  TableComponentPropsWithReactTableData,
+  TableColumnMeta,
+  ExtendedTableOptions,
+} from "./types";
+import { useTableQueryOptions } from "./hooks/useTableQueryOptions";
+
+export type { ReactTableHelperRow } from "./types";
+
+export type ReactTableHelperComponentProps<T extends object> =
+  TableComponentProps<T> &
+    (
+      | TableComponentPropsWithOldTableData<T>
+      | TableComponentPropsWithReactTableData<T>
+    );
+
+export type ReactTableHelperComponentRef = {
+  options: ExtendedTableOptions | null;
+};
+
+/**
+ * ReactTableHelperComponent
+ * simple table with our backend realization
+ * and pagination.
+ * @param props
+ * @constructor
+ */
+function WrappedReactTableHelperComponent<T extends object>(
+  props: ReactTableHelperComponentProps<T>,
+  ref: Ref<ReactTableHelperComponentRef>
+) {
+  const {
+    paginator,
+    headers,
+    renderItemFn,
+    isLoading,
+    striped = true,
+    bordered = true,
+    displaySearchBar = true,
+    displayPerPageSelect = true,
+    displayShowingSection = true,
+    externalFilters = {},
+    initialOptions = {},
+    columns,
+    sortableColumns = [],
+    renderRow,
+    ...tableProps
+  } = props;
+
+  const { pathname } = useLocation();
+
+  const {
+    sortKey,
+    sortDirection,
+    options,
+    setOptions,
+    optionsCache,
+    setOptionsCache,
+    cachedExternalFilters,
+    setCachedExternalFilters,
+  } = useTableQueryOptions({ initialOptions, externalFilters });
+
+  const tableColumns = useMemo(() => {
+    if (!columns && !headers) return [];
+
+    if (columns && !headers) {
+      return columns.map((column) => {
+        const { accessorKey } = column as ColumnDefResolved<T>;
+        const isSortable = sortableColumns.includes(accessorKey);
+
+        return {
+          ...column,
+          meta: {
+            className: TableService.getHeaderClasses(
+              { isSortable, key: accessorKey, title: accessorKey },
+              sortKey,
+              sortDirection
+            ),
+            onClick: isSortable ? () => onSort(accessorKey!) : undefined,
+          },
+        };
+      });
+    }
+
+    return headers.map((header) => {
+      if (typeof header === "string") {
+        return {
+          accessorKey: header.toLowerCase(),
+          header: () => header,
+          meta: {
+            className: TableService.getHeaderClasses(
+              header,
+              sortKey,
+              sortDirection
+            ),
+          },
+        };
+      }
+
+      return {
+        accessorKey: header?.key || header.title.toLowerCase(),
+        header: () => header.title,
+        meta: {
+          onClick: () => header.isSortable && onSort(header.key!),
+          className: TableService.getHeaderClasses(
+            header,
+            sortKey,
+            sortDirection
+          ),
+          style: { width: header?.width || "auto" },
+        },
+      };
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [headers, columns, sortKey, sortDirection, sortableColumns]);
+
+  const { getHeaderGroups, getRowModel } = useReactTable<T>({
+    data: paginator?.data || [],
+    columns: tableColumns,
+    getCoreRowModel: getCoreRowModel<T>(),
+    ...tableProps,
+  });
+
+  useImperativeHandle(ref, () => {
+    return { options };
+  });
+
+  // Redirect to the URL with a new parameters
+  // ONLY: if any option or external filters has changed
+  useEffect(
+    () => {
+      if (
+        isEqual(optionsCache, options) &&
+        isEqual(cachedExternalFilters, externalFilters)
+      )
+        return;
+
+      setOptionsCache(options);
+      setCachedExternalFilters(externalFilters);
+
+      const nextUrlSearchParams = new URLSearchParams({
+        ...options,
+        ...externalFilters,
+      });
+
+      RouteService.redirectTo(
+        [pathname, nextUrlSearchParams.toString()].join("?")
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pathname, options, externalFilters]
+  );
+
+  const onSort = (key: string) => {
+    let nextDirection = TableService.DEFAULT_SORT_DIRECTION;
+
+    if (sortKey === key) {
+      setOptions((prevOptions) => {
+        nextDirection = TableService.getSortDirection(
+          prevOptions.sortDirection,
+          nextDirection
+        );
+
+        return {
+          ...prevOptions,
+          sortKey: key,
+          sortDirection: nextDirection,
+        };
+      });
+    } else {
+      setOptions((prevOptions) => ({
+        ...prevOptions,
+        sortKey: key,
+        sortDirection: nextDirection,
+      }));
+    }
+  };
+
+  const onPerPageChange = (nextPerPage: number) => {
+    setOptions((prevOptions) => ({
+      ...prevOptions,
+      perPage: nextPerPage,
+    }));
+  };
+
+  const onPageChange = (nextPage: number) => {
+    setOptions((prevOptions) => ({
+      ...prevOptions,
+      page: nextPage,
+    }));
+  };
+
+  const onFilterChange = (nextFilter: string) => {
+    setOptions(({ page: prevPage, ...prevOptions }) => {
+      let nextPage = prevPage;
+
+      if (
+        (!nextFilter && prevOptions.filter) ||
+        (nextFilter && !prevOptions.filter)
+      ) {
+        nextPage = 1;
+      }
+
+      return {
+        ...prevOptions,
+        page: nextPage,
+        filter: nextFilter,
+      };
+    });
+  };
+
+  return (
+    <div className={clsx("table-helper", isLoading ? "py-5" : "py-1")}>
+      <LoaderIndicator isLoaded={!isLoading}>
+        <Row>
+          <Col>
+            {displayPerPageSelect && (
+              <PerPageHelperComponent
+                onChangeFn={onPerPageChange}
+                defaultValue={
+                  paginator?.per_page ?? TableService.DEFAULT_PER_PAGE
+                }
+              />
+            )}
+          </Col>
+          <Col>
+            {displaySearchBar && (
+              <FilterHelperComponent
+                onClickFn={onFilterChange}
+                defaultValue={options.filter ?? ""}
+              />
+            )}
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <div className="table-responsive">
+              <Table striped={striped} bordered={bordered} hover>
+                <thead>
+                  {getHeaderGroups().map((headerGroup) => (
+                    <tr key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => {
+                        const headerMeta = header.column.columnDef
+                          .meta as TableColumnMeta;
+
+                        return (
+                          <th
+                            key={header.id}
+                            className={headerMeta?.className}
+                            onClick={headerMeta?.onClick}
+                            style={headerMeta?.style}
+                          >
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                          </th>
+                        );
+                      })}
+                    </tr>
+                  ))}
+                </thead>
+                <tbody>
+                  {getRowModel().rows.map((row, index) => {
+                    if (renderItemFn) {
+                      return renderItemFn(row.original, index);
+                    }
+
+                    return renderRow(row);
+                  })}
+                </tbody>
+              </Table>
+            </div>
+          </Col>
+        </Row>
+
+        <PaginationHelperComponent
+          displayShowingSection={displayShowingSection}
+          paginator={paginator}
+          onPageChangeFn={onPageChange}
+        />
+      </LoaderIndicator>
+    </div>
+  );
+}
+
+const ReactTableHelperComponent = forwardRef(
+  WrappedReactTableHelperComponent
+) as <T extends object>(
+  props: ReactTableHelperComponentProps<T> & {
+    ref?: Ref<ReactTableHelperComponentRef>;
+  }
+) => ReactElement;
+
+export { ReactTableHelperComponent };

package/src/table/Table.stories.tsx

@@ -1,7 +1,7 @@
 import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
 import { Meta, Story } from "@storybook/react";
 import { range } from "lodash";
-import React from "react";
+import React, { useRef } from "react";
 import { Router } from "../auth/Router";
 import {
   FilterHelperComponent as FilterHelper,
@@ -19,6 +19,13 @@ import {
   TableHelperComponent as TableHelper,
   TableHelperComponentProps,
 } from "./TableHelperComponent";
+import {
+  ReactTableHelperComponent as ReactTableHelper,
+  ReactTableHelperComponentProps,
+  ReactTableHelperRow,
+  ReactTableHelperComponentRef,
+} from "./ReactTableHelperComponent";
+import { flexRender } from "./utils/index";
 
 export default {
   title: "Table",
@@ -45,6 +52,40 @@ export const PerPageHelperComponent: Story<PerPageHelperComponentProps> = (
   args
 ) => <PerPageHelper {...args} />;
 
+export const ReactTableHelperComponent: Story<
+  ReactTableHelperComponentProps<any>
+> = (args) => (
+  <>
+    <Router>
+      <ReactTableHelper {...args} />
+    </Router>
+  </>
+);
+
+const ComponentInsideRouter = (args) => {
+  const ref = useRef<ReactTableHelperComponentRef>(null);
+
+  return (
+    <ReactTableHelper
+      {...args}
+      ref={ref}
+      externalFilters={{ uniqField: "uniqField" }}
+    />
+  );
+};
+
+export const ReactTableHelperComponentWithColumns: Story<
+  ReactTableHelperComponentProps<any>
+> = (args) => {
+  return (
+    <>
+      <Router>
+        <ComponentInsideRouter {...args} />
+      </Router>
+    </>
+  );
+};
+
 const getPaginator = (perPage, items = 100) =>
   ({
     current_page: 1,
@@ -98,3 +139,88 @@ TableHelperComponent.args = {
 PaginationHelperComponent.args = {
   paginator: getPaginator(24, 100),
 };
+
+ReactTableHelperComponent.args = {
+  isLoading: false,
+  headers: [
+    {
+      title: "ID",
+      key: "id",
+      isSortable: true,
+      width: "600px",
+    },
+    "Title",
+    "Description",
+    "Action",
+  ],
+  paginator: getPaginator(24, 10),
+  renderItemFn: (row) => {
+    return (
+      <tr key={row.id}>
+        <td>{row.id}</td>
+        <td>{row.title}</td>
+        <td>{row.description}</td>
+        <td>ADD | REMOVE</td>
+      </tr>
+    );
+  },
+  striped: false,
+  bordered: false,
+  displayShowingSection: false,
+  initialOptions: {
+    page: 1,
+    perPage: 10,
+    sortKey: "id",
+    sortDirection: "desc",
+    filter: "",
+  },
+};
+
+ReactTableHelperComponentWithColumns.args = {
+  isLoading: false,
+  columns: [
+    {
+      accessorKey: "id",
+      header: () => "CustomHeader",
+    },
+    {
+      accessorKey: "title",
+      header: () => "SuperTitle",
+    },
+    {
+      accessorKey: "description",
+      header: () => "AwesomeDescription",
+    },
+    {
+      accessorKey: "actions",
+      header: () => "Incredible Actions",
+    },
+  ],
+  sortableColumns: ["id"],
+  paginator: getPaginator(24, 10),
+  renderRow: (row: ReactTableHelperRow<any>) => {
+    return (
+      <tr key={row.id}>
+        {row.getVisibleCells().map((cell) => {
+          return (
+            <td key={cell.id}>
+              {cell.column.id === "actions"
+                ? "ADD | REMOVE"
+                : flexRender(cell.column.columnDef.cell, cell.getContext())}
+            </td>
+          );
+        })}
+      </tr>
+    );
+  },
+  striped: false,
+  bordered: false,
+  displayShowingSection: false,
+  initialOptions: {
+    page: 1,
+    perPage: 10,
+    sortKey: "id",
+    sortDirection: "desc",
+    filter: "",
+  },
+};

package/src/table/TableHelperComponent.tsx

@@ -14,6 +14,7 @@ import { FilterHelperComponent } from "./FilterHelperComponent";
 import { PaginationHelperComponent } from "./PaginationHelperComponent";
 import { PerPageHelperComponent } from "./PerPageHelperComponent";
 import { getFilterOptionsValue } from "./utils";
+import { ExtendedTableOptions } from "./types";
 
 export interface TableHelperComponentProps {
   headers: ITableHeader[];
@@ -31,7 +32,6 @@ export interface TableHelperComponentProps {
   initialOptions?: Partial<ITableProps>;
 }
 
-export type ExtendedTableOptions = ITableProps & { [key: string]: any };
 // @TODO Refactor? component to get less complexity
 // with query filter params. Now External filters use only in
 // one place of Dashboard.
@@ -42,6 +42,8 @@ export type ExtendedTableOptions = ITableProps & { [key: string]: any };
 
 /**
  * TableHelperComponent
+ * @deprecated use new ReactTableHelperComponent
+ * for default tables
  * @param props
  * @constructor
  */

package/src/table/hooks/useTableQueryOptions.ts

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
+import { getFilterOptionsValue } from "../utils";
+import { TableComponentProps, ExtendedTableOptions } from "../types";
+
+export const useTableQueryOptions = <T extends object>({
+  initialOptions = {},
+  externalFilters = {},
+}: Pick<TableComponentProps<T>, "initialOptions" | "externalFilters">) => {
+  const query = useQuery();
+
+  const page = Number(getFilterOptionsValue(query, initialOptions, "page"));
+  const perPage = Number(
+    getFilterOptionsValue(query, initialOptions, "perPage")
+  );
+  const sortKey = String(
+    getFilterOptionsValue(query, initialOptions, "sortKey")
+  );
+  const sortDirection = String(
+    getFilterOptionsValue(query, initialOptions, "sortDirection")
+  );
+
+  const filter = String(getFilterOptionsValue(query, initialOptions, "filter"));
+
+  const [optionsCache, setOptionsCache] = useState<ExtendedTableOptions>();
+  const [options, setOptions] = useState<ExtendedTableOptions>({
+    page,
+    perPage,
+    sortKey,
+    sortDirection,
+    filter,
+  });
+  const [cachedExternalFilters, setCachedExternalFilters] =
+    useState<{ [key: string]: any }>(externalFilters);
+
+  return {
+    page,
+    perPage,
+    sortKey,
+    sortDirection,
+    filter,
+    optionsCache,
+    setOptionsCache,
+    options,
+    setOptions,
+    cachedExternalFilters,
+    setCachedExternalFilters,
+  };
+};

package/src/table/index.ts

@@ -4,3 +4,4 @@ export * from "./PerPageHelperComponent";
 export * from "./StaticTable";
 export * from "./TableHelperComponent";
 export * from "./MenuButton";
+export * from "./ReactTableHelperComponent";

package/src/table/types.ts

@@ -0,0 +1,47 @@
+import { ReactNode, CSSProperties } from "react";
+import {
+  TableOptions,
+  ColumnDef,
+  Row as TableRow,
+} from "@tanstack/react-table";
+import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
+import ITableHeader from "@licklist/plugins/dist/types/services/Table/ITableHeader";
+import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
+
+export type ReactTableHelperRow<T extends object> = TableRow<T>;
+
+export type ExtendedTableOptions = ITableProps & { [key: string]: any };
+
+export interface TableComponentProps<T extends object>
+  extends Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel"> {
+  paginator?: ILengthAwarePaginator<T>;
+  isLoading?: boolean;
+  striped?: boolean;
+  bordered?: boolean;
+  displaySearchBar?: boolean;
+  displayPerPageSelect?: boolean;
+  displayShowingSection?: boolean;
+  externalFilters?: { [key: string]: any };
+  initialOptions?: Partial<ITableProps>;
+  sortableColumns?: string[];
+}
+
+export type TableColumnMeta = {
+  onClick?: () => void;
+  className?: string;
+  style?: CSSProperties;
+};
+
+export type TableComponentPropsWithOldTableData<T extends object> = {
+  headers: ITableHeader[];
+  renderItemFn: (row: T, index: number) => void;
+  columns?: never;
+  renderRow?: never;
+};
+
+export type TableComponentPropsWithReactTableData<T extends object> = {
+  headers?: never;
+  renderItemFn?: never;
+  columns: ColumnDef<T, any>[];
+  renderRow: (row: ReactTableHelperRow<T>) => ReactNode;
+};

package/src/table/utils/index.ts

@@ -1,6 +1,8 @@
 import ITableProps from "@licklist/plugins/dist/types/services/Table/ITableProps";
 import TableService from "@licklist/plugins/dist/services/Table/TableService";
 
+export { flexRender } from "@tanstack/react-table";
+
 const DEFAULT_QUERY_VALUES: { [key in keyof ITableProps]: string | number } = {
   page: TableService.DEFAULT_PAGE,
   perPage: TableService.DEFAULT_PER_PAGE,