@tsed/react-formio 2.2.2 → 2.3.0

package/dist/components/table/components/defaultCell.component.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function DefaultCell({ value, render }: any): JSX.Element;

package/dist/components/table/filters/selectColumnFilter.component.d.ts

@@ -1,3 +1,11 @@
 import React from "react";
 import { FilterProps } from "react-table";
-export declare function SelectColumnFilter<D extends Record<string, unknown> = {}>({ column }: FilterProps<D>): React.JSX.Element;
+export declare function useSelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>): {
+    value: any;
+    onChange: (_: string, value: any) => void;
+    choices: {
+        value: string;
+        label: string;
+    }[];
+};
+export declare function SelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>): React.JSX.Element;

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

@@ -1,10 +1,24 @@
 import React, { PropsWithChildren } from "react";
-import { CellProps, FilterProps, Renderer, TableOptions } from "react-table";
+import { Cell, CellProps, Column, 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";
 import { DefaultRow, DefaultRowProps } from "../components/defaultRow.component";
+export interface ExtraColumnProps {
+    colspan?: number;
+    hidden?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export type ExtendedColumn<Data extends object = any> = Column<Data> & ExtraColumnProps;
+export type ExtendedCell<Data extends object = any> = Cell<Data, any> & {
+    column: ExtraColumnProps;
+};
 export interface TableProps<Data extends object = any> extends TableOptions<Data>, Partial<QueryOptions> {
+    /**
+     * extended columns interface
+     */
+    columns: ReadonlyArray<ExtendedColumn<Data>>;
     className?: string;
     /**
      * Call the listener when a filter / pagination  / sort change.

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/// <reference types="react" />
 import { DefaultRowProps } from "../components/defaultRow.component";
 export declare function useDndRow<Data extends object = {}>({ onDrag, onDrop, index, ...props }: DefaultRowProps<Data>): {
     opacity: number;

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

@@ -24,7 +24,7 @@ export declare const Sandbox: {
             modified: string;
             form: string;
         }[];
-        columns: import("react-table").Column<{}>[];
+        columns: import(".").ExtendedColumn<any>[];
         operations: ({
             title: string;
             action: string;
@@ -49,7 +49,7 @@ export declare const TableWithDragNDrop: {
     args: {
         enableDragNDrop: boolean;
         data: never[];
-        columns: import("react-table").Column<{}>[];
+        columns: import(".").ExtendedColumn<any>[];
         operations: ({
             title: string;
             action: string;

package/dist/components/table/utils/mapFormToColumns.d.ts

@@ -1,3 +1,3 @@
-import { Column } from "react-table";
 import { FormSchema } from "../../../interfaces";
-export declare function mapFormToColumns(form: FormSchema): Column[];
+import { ExtendedColumn } from "../hooks/useCustomTable.hook";
+export declare function mapFormToColumns(form: FormSchema): ExtendedColumn[];

package/dist/index.js

@@ -400,7 +400,9 @@ function Pagination(props) {
   }, /*#__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("li", {
     className: "mb-3 flex items-center",
     "data-testid": "pagination-total-items"
-  }, i18n("Total"), ": ", /*#__PURE__*/React__default["default"].createElement("strong", null, new Intl.NumberFormat(undefined).format(totalLength)), " ", i18n("items")));
+  }, i18n("Total"), ": ", /*#__PURE__*/React__default["default"].createElement("strong", {
+    className: "mx-1"
+  }, new Intl.NumberFormat(undefined).format(totalLength)), " ", i18n("items")));
 }
 
 function DefaultArrowSort(_ref) {
@@ -519,7 +521,10 @@ function DefaultCells(_ref) {
     }
     return /*#__PURE__*/React__default["default"].createElement("td", _extends({
       colSpan: colspan
-    }, cell.getCellProps(), {
+    }, cell.getCellProps({
+      className: cell.column.className,
+      style: cell.column.style
+    }), {
       key: "tableInstance.page.cells." + (cell.value || "value") + "." + i
     }), cell.render("Cell"));
   }));
@@ -2518,35 +2523,55 @@ function FormSettings(props) {
   }, i18n("Save settings")));
 }
 
-function SelectColumnFilter(_ref) {
-  var column = _ref.column;
+function useSelectColumnFilter(props) {
+  var column = props.column;
   var id = column.id,
-    preFilteredRows = column.preFilteredRows,
-    filterValue = column.filterValue,
-    setFilter = column.setFilter;
+    preFilteredRows = column.preFilteredRows;
   var customChoices = column.choices;
-  var choices = customChoices || [].concat(new Set(preFilteredRows.map(function (row) {
-    return row.values[id];
-  }))).filter(function (value) {
-    return value;
-  }).map(function (value) {
-    return {
-      label: value,
-      value: value
-    };
-  });
-  return /*#__PURE__*/React__default["default"].createElement(Select, {
-    key: "filter-" + column.id,
-    name: "filter-" + column.id,
-    size: "sm",
+  var filterValue = column.filterValue,
+    setFilter = column.setFilter;
+  var choices = function () {
+    if (customChoices) {
+      if (typeof customChoices === "function") {
+        return customChoices(props);
+      }
+      return customChoices;
+    }
+    return [].concat(new Set(preFilteredRows.map(function (row) {
+      return row.values[id];
+    }))).filter(function (value) {
+      return value;
+    }).map(function (value) {
+      return {
+        label: value,
+        value: value
+      };
+    });
+  }();
+  var onChange = function onChange(_, value) {
+    setFilter(value || undefined);
+  };
+  return {
     value: filterValue,
+    onChange: onChange,
     choices: [{
       value: "",
       label: "All"
-    }].concat(choices),
-    onChange: function onChange(name, value) {
-      setFilter(value || undefined);
-    }
+    }].concat(choices)
+  };
+}
+function SelectColumnFilter(props) {
+  var _useSelectColumnFilte = useSelectColumnFilter(props),
+    value = _useSelectColumnFilte.value,
+    choices = _useSelectColumnFilte.choices,
+    onChange = _useSelectColumnFilte.onChange;
+  return /*#__PURE__*/React__default["default"].createElement(Select, {
+    key: "filter-" + props.column.id,
+    name: "filter-" + props.column.id,
+    size: "sm",
+    value: value,
+    choices: choices,
+    onChange: onChange
   });
 }
 
@@ -7543,6 +7568,7 @@ function mapFormToColumns(form) {
       var column = {
         Header: component.label || component.title || component.key,
         accessor: "data." + component.key,
+        className: "text-center",
         Cell: function Cell(props) {
           return /*#__PURE__*/React__default["default"].createElement(DefaultCell, _extends({}, props, {
             render: function render(value) {
@@ -7774,5 +7800,6 @@ exports.useForm = useForm;
 exports.useFormEdit = useFormEdit;
 exports.useModal = useModal;
 exports.useOperations = useOperations;
+exports.useSelectColumnFilter = useSelectColumnFilter;
 exports.useTooltip = useTooltip;
 //# sourceMappingURL=index.js.map