@tsed/react-formio 2.2.3 → 2.3.1

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

@@ -521,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"));
   }));
@@ -1306,24 +1309,24 @@ function Form(props) {
 Form.propTypes = {
   name: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
-  /**
-   *
+  /**
+   *
    */
   src: PropTypes__default["default"].string,
-  /**
-   * url to fetch form
+  /**
+   * url to fetch form
    */
   url: PropTypes__default["default"].string,
-  /**
-   * Raw form object
+  /**
+   * Raw form object
    */
   form: PropTypes__default["default"].object,
-  /**
-   * Data submission
+  /**
+   * Data submission
    */
   submission: PropTypes__default["default"].object,
-  /**
-   * Configuration option
+  /**
+   * Configuration option
    */
   options: PropTypes__default["default"].shape({
     readOnly: PropTypes__default["default"].bool,
@@ -2520,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
   });
 }
 
@@ -7334,12 +7357,12 @@ function RemoveModal(_ref2) {
 
 var ReactComponent = /*#__PURE__*/function (_Components$component) {
   _inheritsLoose(ReactComponent, _Components$component);
-  /**
-   * This is the first phase of component building where the component is instantiated.
-   *
-   * @param component - The component definition created from the settings form.
-   * @param options - Any options passed into the renderer.
-   * @param data - The submission data where this component's data exists.
+  /**
+   * This is the first phase of component building where the component is instantiated.
+   *
+   * @param component - The component definition created from the settings form.
+   * @param options - Any options passed into the renderer.
+   * @param data - The submission data where this component's data exists.
    */
   // eslint-disable-next-line no-useless-constructor,import/no-anonymous-default-export
   function ReactComponent(component, options, data) {
@@ -7348,11 +7371,11 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
     _this.reactInstance = void 0;
     _this.shouldSetValue = void 0;
     _this.dataForSetting = void 0;
-    /**
-     * The user has changed the value in the component and the value needs to be updated on the main submission object and other components notified of a change event.
-     *
-     * @param value
-     * @param flags
+    /**
+     * The user has changed the value in the component and the value needs to be updated on the main submission object and other components notified of a change event.
+     *
+     * @param value
+     * @param flags
      */
     _this.updateValue = function (value, flags) {
       flags = flags || {};
@@ -7365,37 +7388,37 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
     return _this;
   }
   var _proto = ReactComponent.prototype;
-  /**
-   * This method is called any time the component needs to be rebuilt. It is most frequently used to listen to other
-   * components using the this.on() function.
+  /**
+   * This method is called any time the component needs to be rebuilt. It is most frequently used to listen to other
+   * components using the this.on() function.
    */
   _proto.init = function init() {
     return _Components$component.prototype.init.call(this);
   }
-  /**
-   * This method is called before the component is going to be destroyed, which is when the component instance is
-   * destroyed. This is different from detach which is when the component instance still exists but the dom instance is
-   * removed.
+  /**
+   * This method is called before the component is going to be destroyed, which is when the component instance is
+   * destroyed. This is different from detach which is when the component instance still exists but the dom instance is
+   * removed.
    */;
   _proto.destroy = function destroy() {
     return _Components$component.prototype.destroy.call(this);
   }
-  /**
-   * The second phase of component building where the component is rendered as an HTML string.
-   *
-   * @returns {string} - The return is the full string of the component
+  /**
+   * The second phase of component building where the component is rendered as an HTML string.
+   *
+   * @returns {string} - The return is the full string of the component
    */;
   _proto.render = function render() {
     // For react components, we simply render as a div which will become the react instance.
     // By calling super.render(string) it will wrap the component with the needed wrappers to make it a full component.
     return _Components$component.prototype.render.call(this, "<div ref=\"react-" + this.id + "\"></div>");
   }
-  /**
-   * The third phase of component building where the component has been attached to the DOM as 'element' and is ready
-   * to have its javascript events attached.
-   *
-   * @param element
-   * @returns {Promise<void>} - Return a promise that resolves when the attach is complete.
+  /**
+   * The third phase of component building where the component has been attached to the DOM as 'element' and is ready
+   * to have its javascript events attached.
+   *
+   * @param element
+   * @returns {Promise<void>} - Return a promise that resolves when the attach is complete.
    */;
   _proto.attach = function attach(element) {
     try {
@@ -7419,9 +7442,9 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
       return Promise.reject(e);
     }
   }
-  /**
-   * The fourth phase of component building where the component is being removed from the page. This could be a redraw
-   * or it is being removed from the form.
+  /**
+   * The fourth phase of component building where the component is being removed from the page. This could be a redraw
+   * or it is being removed from the form.
    */
   ;
   _proto.detach = function detach() {
@@ -7432,16 +7455,16 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
     }
     _Components$component.prototype.detach.call(this);
   }
-  /**
-   * Override this function to render a react component.
+  /**
+   * Override this function to render a react component.
    */;
   _proto.renderReact = function renderReact() {
     return null;
   }
-  /**
-   * Override this function to insert your custom component.
-   *
-   * @param element
+  /**
+   * Override this function to insert your custom component.
+   *
+   * @param element
    */
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   ;
@@ -7449,8 +7472,8 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
     // eslint-disable-next-line react/no-render-return-value
     return ReactDOM__default["default"].render(this.renderReact(), element);
   }
-  /**
-   * Override this function.
+  /**
+   * Override this function.
    */
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   ;
@@ -7459,11 +7482,11 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
       ReactDOM__default["default"].unmountComponentAtNode(element);
     }
   }
-  /**
-   * Something external has set a value and our component needs to be updated to reflect that. For example, loading a submission.
-   *
-   * @param value
-   * @param flags
+  /**
+   * Something external has set a value and our component needs to be updated to reflect that. For example, loading a submission.
+   *
+   * @param value
+   * @param flags
    */;
   _proto.setValue = function setValue(value, flags) {
     if (this.reactInstance) {
@@ -7477,10 +7500,10 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
     }
     return false;
   };
-  /**
-   * Get the current value of the component. Should return the value set in the react component.
-   *
-   * @returns {*}
+  /**
+   * Get the current value of the component. Should return the value set in the react component.
+   *
+   * @returns {*}
    */
   _proto.getValue = function getValue() {
     if (this.reactInstance) {
@@ -7488,13 +7511,13 @@ var ReactComponent = /*#__PURE__*/function (_Components$component) {
     }
     return this.defaultValue;
   }
-  /**
-   * Override normal validation check to insert custom validation in react component.
-   *
-   * @param data
-   * @param dirty
-   * @param rowData
-   * @returns {boolean}
+  /**
+   * Override normal validation check to insert custom validation in react component.
+   *
+   * @param data
+   * @param dirty
+   * @param rowData
+   * @returns {boolean}
    */;
   _proto.checkValidity = function checkValidity(data, dirty, rowData) {
     var valid = _Components$component.prototype.checkValidity.call(this, data, dirty, rowData);
@@ -7545,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) {
@@ -7776,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