@licklist/design 0.44.486-dev.9 → 0.44.486

package/src/table/ReactTableHelperComponent.tsx

@@ -1,321 +0,0 @@
-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/hooks/useTableQueryOptions.ts

@@ -1,49 +0,0 @@
-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/types.ts

@@ -1,47 +0,0 @@
-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;
-};