@tsed/react-formio 2.1.4 → 2.2.1

package/dist/components/pagination/pagination.component.d.ts

@@ -9,9 +9,10 @@ export interface PaginationProps {
     canNextPage: boolean;
     pageCount: number;
     pageIndex: number;
-    pageOptions?: any;
+    pageOptions?: number[];
     pageSize: number;
     setPageSize: any;
+    totalLength?: number;
     i18n?: (f: string) => string;
 }
 export declare function Pagination(props: PaginationProps): React.JSX.Element;

package/dist/components/table/hooks/useCustomTable.hook.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from "react";
-import { CellProps, FilterProps, Renderer, TableInstance, TableOptions } from "react-table";
+import { CellProps, FilterProps, Renderer, TableOptions } from "react-table";
 import { OnClickOperation, Operation, QueryOptions } from "../../../interfaces";
 import { Pagination as DefaultPagination } from "../../pagination/pagination.component";
 import { DefaultCellHeaderProps } from "../components/defaultCellHeader.component";
@@ -18,6 +18,10 @@ export interface TableProps<Data extends object = any> extends TableOptions<Data
      * Pagination steps list
      */
     pageSizes?: number[];
+    /**
+     * Total length of the data
+     */
+    totalLength?: number;
     /**
      *
      */
@@ -86,7 +90,7 @@ declare function DefaultLoader(): React.JSX.Element;
 declare function DefaultEmptyData(): React.JSX.Element;
 export declare function useCustomTable<Data extends object = {}>(props: PropsWithChildren<TableProps<Data>>): {
     className: string;
-    tableInstance: TableInstance<Data>;
+    tableInstance: import("react-table").TableInstance<Data>;
     CellHeader: any;
     isLoading: boolean | undefined;
     Loader: React.ComponentType<{}> | typeof DefaultLoader;
@@ -98,6 +102,7 @@ export declare function useCustomTable<Data extends object = {}>(props: PropsWit
     pageIndex: number;
     pageSize: number;
     pageSizes: number[];
+    totalLength: number | undefined;
     setPageSize: (pageSize: number) => void;
     i18n: (f: string) => string;
     children: React.ReactNode;

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

@@ -10,3 +10,6 @@ export * from "./filters/sliderColumnFilter.component";
 export * from "./hooks/useCustomTable.hook";
 export * from "./hooks/useOperations.hook";
 export * from "./table.component";
+export * from "./utils/getPageNumbers";
+export * from "./utils/mapFormToColumns";
+export * from "./utils/swapElements";

package/dist/index.js

@@ -327,6 +327,7 @@ function Pagination(props) {
     pageOptions = props.pageOptions,
     pageSize = props.pageSize,
     setPageSize = props.setPageSize,
+    totalLength = props.totalLength,
     _props$i18n = props.i18n,
     i18n = _props$i18n === void 0 ? function (f) {
       return f;
@@ -395,8 +396,13 @@ function Pagination(props) {
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: "ml-3"
   }, i18n("items per page"))), pageOptions && /*#__PURE__*/React__default["default"].createElement("li", {
-    className: "mb-3 flex items-center"
-  }, /*#__PURE__*/React__default["default"].createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React__default["default"].createElement("strong", null, pageIndex + 1, " of ", pageOptions.length)));
+    className: "mb-3 mr-3 flex items-center"
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, i18n("Page"), "\xA0"), /*#__PURE__*/React__default["default"].createElement("strong", null, pageIndex + 1, " of ", pageOptions.length), totalLength !== undefined && /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "ml-3"
+  }, i18n("Totals"), ": ", /*#__PURE__*/React__default["default"].createElement("strong", null, new Intl.NumberFormat(undefined).format(totalLength)), " ", i18n("items"))), totalLength !== undefined && /*#__PURE__*/React__default["default"].createElement("li", {
+    className: "mb-3 flex items-center",
+    "data-testid": "pagination-total-items"
+  }, i18n("Totals"), ": ", /*#__PURE__*/React__default["default"].createElement("strong", null, new Intl.NumberFormat(undefined).format(totalLength)), " ", i18n("items")));
 }
 
 function DefaultArrowSort(_ref) {
@@ -782,7 +788,7 @@ function useOperations(_ref) {
   };
 }
 
-var _excluded$9 = ["children", "className", "columns", "data", "onChange", "onClick", "onDrag", "onDrop", "operations", "pageSizes", "filters", "filterId", "pageSize", "pageIndex", "sortBy", "isLoading", "disableFilters", "disablePagination", "ArrowSort", "ColumnFilter", "EmptyData", "Loader", "Pagination", "Row", "CellHeader", "CellOperations", "i18n"];
+var _excluded$9 = ["children", "className", "columns", "data", "onChange", "onClick", "onDrag", "onDrop", "operations", "pageSizes", "filters", "filterId", "pageSize", "pageIndex", "totalLength", "sortBy", "isLoading", "disableFilters", "disablePagination", "ArrowSort", "ColumnFilter", "EmptyData", "Loader", "Pagination", "Row", "CellHeader", "CellOperations", "i18n"];
 function getOperationCallback(operations, onClick) {
   return function (data, action) {
     var operation = operations.find(function (operation) {
@@ -826,6 +832,7 @@ function useCustomTable(props) {
     controlledFilterId = props.filterId,
     controlledPageSize = props.pageSize,
     controlledPageIndex = props.pageIndex,
+    totalLength = props.totalLength,
     controlledSortBy = props.sortBy,
     isLoading = props.isLoading,
     disableFilters = props.disableFilters,
@@ -927,6 +934,7 @@ function useCustomTable(props) {
     pageIndex: pageIndex,
     pageSize: pageSize,
     pageSizes: pageSizes,
+    totalLength: totalLength,
     setPageSize: setPageSize,
     i18n: i18n,
     children: children,
@@ -954,6 +962,7 @@ function Table(props) {
     pageSize = _useCustomTable.pageSize,
     pageSizes = _useCustomTable.pageSizes,
     setPageSize = _useCustomTable.setPageSize,
+    totalLength = _useCustomTable.totalLength,
     i18n = _useCustomTable.i18n,
     enableDragNDrop = _useCustomTable.enableDragNDrop,
     children = _useCustomTable.children,
@@ -995,6 +1004,7 @@ function Table(props) {
   })) : null), isLoading ? /*#__PURE__*/React__default["default"].createElement(Loader, null) : null, !data.length ? /*#__PURE__*/React__default["default"].createElement(EmptyData, null) : null, !isLoading && data.length && !disablePagination ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "overflow-hidden"
   }, /*#__PURE__*/React__default["default"].createElement(Pagination, _extends({}, tableInstance, {
+    totalLength: totalLength,
     className: "text-sm",
     pageIndex: pageIndex,
     pageSize: pageSize,
@@ -7739,9 +7749,11 @@ exports.FormSettings = FormSettings;
 exports.FormsTable = FormsTable;
 exports.InputTags = InputTags;
 exports.InputText = InputText;
+exports.LEFT_PAGE = LEFT_PAGE;
 exports.Loader = Loader;
 exports.Modal = Modal;
 exports.Pagination = Pagination;
+exports.RIGHT_PAGE = RIGHT_PAGE;
 exports.ReactComponent = ReactComponent;
 exports.RemoveModal = RemoveModal;
 exports.Select = Select;
@@ -7753,9 +7765,12 @@ exports.Tabs = Tabs;
 exports.callLast = callLast;
 exports.defaultDisplayChoices = defaultDisplayChoices;
 exports.getOperationCallback = getOperationCallback;
+exports.getPageNumbers = getPageNumbers;
 exports.iconClass = iconClass;
+exports.mapFormToColumns = mapFormToColumns;
 exports.mapPagination = mapPagination;
 exports.stopPropagationWrapper = stopPropagationWrapper;
+exports.swapElements = swapElements;
 exports.useCustomTable = useCustomTable;
 exports.useForm = useForm;
 exports.useFormEdit = useFormEdit;