@licklist/design 0.44.476-dev.8 → 0.44.476

package/dist/customers/components/filter/CustomerFilter.js

@@ -1 +0,0 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=e(require("react")),a=require("react-i18next"),s=require("../../../static/TextField.js"),i=e(require("clsx")),n={first_name:"firstName",last_name:"lastName",email:"email",phone:"phone"};exports.CustomerFilter=function(e){var l=e.values,u=e.onChange,c=a.useTranslation(["Design"]).t;return r.createElement("div",{className:"customers-filter d-flex"},r.createElement("div",{className:"d-flex customers-filter-items"},Object.keys(n).map((function(e){var a=c(n[e]);return r.createElement(s.TextField,{key:e,className:i("mb-0"),type:"text",label:a,value:l[e],onChange:function(r){var a;return u(t.__assign(t.__assign({},l),((a={})[e]=r.target.value,a)))}})}))))};

package/dist/customers/components/filter/index.d.ts

@@ -1,3 +0,0 @@
-export { CustomerFilter } from "./CustomerFilter";
-export type { CustomerFilterProps } from "./CustomerFilter";
-//# sourceMappingURL=index.d.ts.map

package/dist/customers/components/filter/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/customers/components/filter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/customers/components/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./filter";
-//# sourceMappingURL=index.d.ts.map

package/dist/customers/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/customers/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/customers/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./components";
-//# sourceMappingURL=index.d.ts.map

package/dist/customers/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/customers/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/styles/customers/Filter.scss

@@ -1,34 +0,0 @@
-.customers-filter {
-  gap: 0.5rem;
-
-  @include media-breakpoint-down(sm) {
-    label {
-      font-size: 0.8rem;
-    }
-  }
-  
-  @include media-breakpoint-up(md) {
-    label {
-      font-size: 0.9rem;
-    }
-  }
-  
-  @include media-breakpoint-up(lg) {
-    label {
-      font-size: 1rem;
-    }
-  }
-
-  @include media-breakpoint-down(lg) {
-    flex-direction: column;
-  }
-
-  .customers-filter-items {
-    gap: 0.5rem;
-  
-    @include media-breakpoint-down(xs) {
-      flex-direction: column;
-      gap: 0rem;  
-    }
-  } 
-}

package/dist/styles/customers/_index.scss

@@ -1 +0,0 @@
-@import "./Filter.scss";

package/dist/table/ReactTableHelperComponent.d.ts

@@ -1,12 +0,0 @@
-import { Ref, ReactElement } from "react";
-import { TableComponentProps, TableComponentPropsWithOldTableData, TableComponentPropsWithReactTableData, ExtendedTableOptions } from "./types";
-export type { ReactTableHelperRow } from "./types";
-export declare type ReactTableHelperComponentProps<T extends object> = TableComponentProps<T> & (TableComponentPropsWithOldTableData<T> | TableComponentPropsWithReactTableData<T>);
-export declare type ReactTableHelperComponentRef = {
-    options: ExtendedTableOptions | null;
-};
-declare const ReactTableHelperComponent: <T extends object>(props: ReactTableHelperComponentProps<T> & {
-    ref?: Ref<ReactTableHelperComponentRef>;
-}) => ReactElement;
-export { ReactTableHelperComponent };
-//# sourceMappingURL=ReactTableHelperComponent.d.ts.map

package/dist/table/ReactTableHelperComponent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReactTableHelperComponent.d.ts","sourceRoot":"","sources":["../../src/table/ReactTableHelperComponent.tsx"],"names":[],"mappings":"AAAA,OAAc,EAKZ,GAAG,EACH,YAAY,EACb,MAAM,OAAO,CAAC;AAiBf,OAAO,EACL,mBAAmB,EACnB,mCAAmC,EACnC,qCAAqC,EAErC,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAGjB,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,oBAAY,8BAA8B,CAAC,CAAC,SAAS,MAAM,IACzD,mBAAmB,CAAC,CAAC,CAAC,GACpB,CACI,mCAAmC,CAAC,CAAC,CAAC,GACtC,qCAAqC,CAAC,CAAC,CAAC,CAC3C,CAAC;AAEN,oBAAY,4BAA4B,GAAG;IACzC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAAC;CACtC,CAAC;AA4QF,QAAA,MAAM,yBAAyB;UAIrB,IAAI,4BAA4B,CAAC;MAEtC,YAAY,CAAC;AAElB,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

package/dist/table/ReactTableHelperComponent.js

@@ -1 +0,0 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),n=e(r),i=require("react-router-dom"),a=e(require("@licklist/plugins/dist/services/Route/RouteService")),o=require("../static/loader/LoaderIndicator.js"),s=require("react-bootstrap"),l=e(require("clsx")),u=require("lodash"),c=require("./FilterHelperComponent.js"),d=require("./PaginationHelperComponent.js"),p=e(require("@licklist/plugins/dist/services/Table/TableService")),m=require("./PerPageHelperComponent.js"),g=require("@tanstack/react-table");require("./utils/index.js");var f=require("./hooks/useTableQueryOptions.js");var _=r.forwardRef((function(e,_){var v,C,y=e.paginator,h=e.headers,E=e.renderItemFn,b=e.isLoading,S=e.striped,q=void 0===S||S,w=e.bordered,R=void 0===w||w,P=e.displaySearchBar,k=void 0===P||P,F=e.displayPerPageSelect,H=void 0===F||F,T=e.displayShowingSection,x=void 0===T||T,L=e.externalFilters,D=void 0===L?{}:L,O=e.initialOptions,j=void 0===O?{}:O,N=e.columns,I=e.sortableColumns,K=void 0===I?[]:I,M=e.renderRow,A=t.__rest(e,["paginator","headers","renderItemFn","isLoading","striped","bordered","displaySearchBar","displayPerPageSelect","displayShowingSection","externalFilters","initialOptions","columns","sortableColumns","renderRow"]),U=i.useLocation().pathname,B=f.useTableQueryOptions({initialOptions:j,externalFilters:D}),G=B.sortKey,Q=B.sortDirection,V=B.options,z=B.setOptions,J=B.optionsCache,W=B.setOptionsCache,X=B.cachedExternalFilters,Y=B.setCachedExternalFilters,Z=r.useMemo((function(){return N||h?N&&!h?N.map((function(e){var r=e.accessorKey,n=K.includes(r);return t.__assign(t.__assign({},e),{meta:{className:p.getHeaderClasses({isSortable:n,key:r,title:r},G,Q),onClick:n?function(){return re(r)}:void 0}})})):h.map((function(e){return"string"==typeof e?{accessorKey:e.toLowerCase(),header:function(){return e},meta:{className:p.getHeaderClasses(e,G,Q)}}:{accessorKey:(null==e?void 0:e.key)||e.title.toLowerCase(),header:function(){return e.title},meta:{onClick:function(){return e.isSortable&&re(e.key)},className:p.getHeaderClasses(e,G,Q),style:{width:(null==e?void 0:e.width)||"auto"}}}})):[]}),[h,N,G,Q,K]),$=g.useReactTable(t.__assign({data:y.data,columns:Z,getCoreRowModel:g.getCoreRowModel()},A)),ee=$.getHeaderGroups,te=$.getRowModel;r.useImperativeHandle(_,(function(){return{options:V}})),r.useEffect((function(){if(!u.isEqual(J,V)||!u.isEqual(X,D)){W(V),Y(D);var e=new URLSearchParams(t.__assign(t.__assign({},V),D));a.redirectTo([U,e.toString()].join("?"))}}),[U,V,D]);var re=function(e){var r=p.DEFAULT_SORT_DIRECTION;z(G===e?function(n){return r=p.getSortDirection(n.sortDirection,r),t.__assign(t.__assign({},n),{sortKey:e,sortDirection:r})}:function(n){return t.__assign(t.__assign({},n),{sortKey:e,sortDirection:r})})};return n.createElement("div",{className:l("table-helper",b?"py-5":"py-1")},n.createElement(o.LoaderIndicator,{isLoaded:!b},n.createElement(s.Row,null,n.createElement(s.Col,null,H&&n.createElement(m.PerPageHelperComponent,{onChangeFn:function(e){z((function(r){return t.__assign(t.__assign({},r),{perPage:e})}))},defaultValue:null!==(v=null==y?void 0:y.per_page)&&void 0!==v?v:p.DEFAULT_PER_PAGE})),n.createElement(s.Col,null,k&&n.createElement(c.FilterHelperComponent,{onClickFn:function(e){z((function(r){var n=r.page,i=t.__rest(r,["page"]),a=n;return(!e&&i.filter||e&&!i.filter)&&(a=1),t.__assign(t.__assign({},i),{page:a,filter:e})}))},defaultValue:null!==(C=V.filter)&&void 0!==C?C:""}))),n.createElement(s.Row,null,n.createElement(s.Col,null,n.createElement("div",{className:"table-responsive"},n.createElement(s.Table,{striped:q,bordered:R,hover:!0},n.createElement("thead",null,ee().map((function(e){return n.createElement("tr",{key:e.id},e.headers.map((function(e){var t=e.column.columnDef.meta;return n.createElement("th",{key:e.id,className:null==t?void 0:t.className,onClick:null==t?void 0:t.onClick,style:null==t?void 0:t.style},g.flexRender(e.column.columnDef.header,e.getContext()))})))}))),n.createElement("tbody",null,te().rows.map((function(e,t){return E?E(e.original,t):M(e)}))))))),n.createElement(d.PaginationHelperComponent,{displayShowingSection:x,paginator:y,onPageChangeFn:function(e){z((function(r){return t.__assign(t.__assign({},r),{page:e})}))}})))}));exports.ReactTableHelperComponent=_;

package/dist/table/hooks/useTableQueryOptions.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-import { TableComponentProps, ExtendedTableOptions } from "../types";
-export declare const useTableQueryOptions: <T extends object>({ initialOptions, externalFilters, }: Pick<TableComponentProps<T>, "initialOptions" | "externalFilters">) => {
-    page: number;
-    perPage: number;
-    sortKey: string;
-    sortDirection: string;
-    filter: string;
-    optionsCache: ExtendedTableOptions;
-    setOptionsCache: import("react").Dispatch<import("react").SetStateAction<ExtendedTableOptions>>;
-    options: ExtendedTableOptions;
-    setOptions: import("react").Dispatch<import("react").SetStateAction<ExtendedTableOptions>>;
-    cachedExternalFilters: {
-        [key: string]: any;
-    };
-    setCachedExternalFilters: import("react").Dispatch<import("react").SetStateAction<{
-        [key: string]: any;
-    }>>;
-};
-//# sourceMappingURL=useTableQueryOptions.d.ts.map

package/dist/table/hooks/useTableQueryOptions.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTableQueryOptions.d.ts","sourceRoot":"","sources":["../../../src/table/hooks/useTableQueryOptions.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAErE,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;CA2ChC,CAAC"}

package/dist/table/hooks/useTableQueryOptions.js

@@ -1 +0,0 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("tslib"),r=require("react"),i=(e(r),e(require("@licklist/plugins/dist/hooks/Query/useQuery"))),s=require("../utils/index.js");exports.useTableQueryOptions=function(e){var o=e.initialOptions,a=void 0===o?{}:o,n=e.externalFilters,l=void 0===n?{}:n,u=i(),p=Number(s.getFilterOptionsValue(u,a,"page")),c=Number(s.getFilterOptionsValue(u,a,"perPage")),g=String(s.getFilterOptionsValue(u,a,"sortKey")),d=String(s.getFilterOptionsValue(u,a,"sortDirection")),O=String(s.getFilterOptionsValue(u,a,"filter")),f=t.__read(r.useState(),2),y=f[0],F=f[1],_=t.__read(r.useState({page:p,perPage:c,sortKey:g,sortDirection:d,filter:O}),2),b=_[0],x=_[1],S=t.__read(r.useState(l),2);return{page:p,perPage:c,sortKey:g,sortDirection:d,filter:O,optionsCache:y,setOptionsCache:F,options:b,setOptions:x,cachedExternalFilters:S[0],setCachedExternalFilters:S[1]}};

package/dist/table/types.d.ts

@@ -1,41 +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 declare type ReactTableHelperRow<T extends object> = TableRow<T>;
-export declare 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 declare type TableColumnMeta = {
-    onClick?: () => void;
-    className?: string;
-    style?: CSSProperties;
-};
-export declare type TableComponentPropsWithOldTableData<T extends object> = {
-    headers: ITableHeader[];
-    renderItemFn: (row: T, index: number) => void;
-    columns?: never;
-    renderRow?: never;
-};
-export declare type TableComponentPropsWithReactTableData<T extends object> = {
-    headers?: never;
-    renderItemFn?: never;
-    columns: ColumnDef<T, any>[];
-    renderRow: (row: ReactTableHelperRow<T>) => ReactNode;
-};
-//# sourceMappingURL=types.d.ts.map

package/dist/table/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/table/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EACL,YAAY,EACZ,SAAS,EACT,GAAG,IAAI,QAAQ,EAChB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,MAAM,mEAAmE,CAAC;AACtG,OAAO,YAAY,MAAM,0DAA0D,CAAC;AACpF,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAElF,oBAAY,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;AAEhE,oBAAY,oBAAoB,GAAG,WAAW,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,CAAC;AAExE,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM,CACnD,SAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,iBAAiB,CAAC;IACrE,SAAS,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,oBAAY,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,oBAAY,mCAAmC,CAAC,CAAC,SAAS,MAAM,IAAI;IAClE,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,YAAY,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB,CAAC;AAEF,oBAAY,qCAAqC,CAAC,CAAC,SAAS,MAAM,IAAI;IACpE,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,OAAO,EAAE,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,SAAS,EAAE,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;CACvD,CAAC"}

package/src/customers/components/filter/CustomerFilter.stories.tsx

@@ -1,19 +0,0 @@
-import React, { useState } from "react";
-import { Meta, Story } from "@storybook/react";
-import { CustomerFilter, CustomerFilterProps } from "./CustomerFilter";
-
-export default {
-  title: "Customers/Filter",
-  component: CustomerFilter,
-} as Meta;
-
-export const Default: Story<CustomerFilterProps> = () => {
-  const [values, setValues] = useState({
-    first_name: "",
-    last_name: "",
-    email: "",
-    phone: "",
-  });
-
-  return <CustomerFilter values={values} onChange={setValues} />;
-};

package/src/customers/components/filter/CustomerFilter.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import clsx from "clsx";
-import { TextField } from "../../../static/TextField";
-
-type CustomerFilterValues = {
-  first_name: string;
-  last_name: string;
-  email: string;
-  phone: string;
-};
-
-const FILTER_FIELDS = {
-  first_name: "firstName",
-  last_name: "lastName",
-  email: "email",
-  phone: "phone",
-};
-
-export interface CustomerFilterProps {
-  values: CustomerFilterValues;
-  onChange: (values: CustomerFilterValues) => void;
-}
-
-export const CustomerFilter = ({ values, onChange }: CustomerFilterProps) => {
-  const { t } = useTranslation(["Design"]);
-
-  return (
-    <div className="customers-filter d-flex">
-      <div className="d-flex customers-filter-items">
-        {Object.keys(FILTER_FIELDS).map((filterKeyName) => {
-          const label = t(FILTER_FIELDS[filterKeyName]);
-
-          return (
-            <TextField
-              key={filterKeyName}
-              className={clsx("mb-0")}
-              type="text"
-              label={label}
-              value={values[filterKeyName]}
-              onChange={(event) =>
-                onChange({ ...values, [filterKeyName]: event.target.value })
-              }
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-};

package/src/customers/components/filter/index.ts

@@ -1,2 +0,0 @@
-export { CustomerFilter } from "./CustomerFilter";
-export type { CustomerFilterProps } from "./CustomerFilter";

package/src/customers/components/index.ts

@@ -1 +0,0 @@
-export * from "./filter";

package/src/customers/index.ts

@@ -1 +0,0 @@
-export * from "./components";

package/src/styles/customers/Filter.scss

@@ -1,34 +0,0 @@
-.customers-filter {
-  gap: 0.5rem;
-
-  @include media-breakpoint-down(sm) {
-    label {
-      font-size: 0.8rem;
-    }
-  }
-  
-  @include media-breakpoint-up(md) {
-    label {
-      font-size: 0.9rem;
-    }
-  }
-  
-  @include media-breakpoint-up(lg) {
-    label {
-      font-size: 1rem;
-    }
-  }
-
-  @include media-breakpoint-down(lg) {
-    flex-direction: column;
-  }
-
-  .customers-filter-items {
-    gap: 0.5rem;
-  
-    @include media-breakpoint-down(xs) {
-      flex-direction: column;
-      gap: 0rem;  
-    }
-  } 
-}

package/src/styles/customers/_index.scss

@@ -1 +0,0 @@
-@import "./Filter.scss";

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,
-  };
-};