@tsed/react-formio 2.2.3 → 2.3.1

package/dist/index.modern.js

@@ -450,7 +450,10 @@ function DefaultCells({
     }
     return /*#__PURE__*/React.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"));
   }));
@@ -1164,24 +1167,24 @@ function Form(props) {
 Form.propTypes = {
   name: PropTypes.string,
   className: PropTypes.string,
-  /**
-   *
+  /**
+   *
    */
   src: PropTypes.string,
-  /**
-   * url to fetch form
+  /**
+   * url to fetch form
    */
   url: PropTypes.string,
-  /**
-   * Raw form object
+  /**
+   * Raw form object
    */
   form: PropTypes.object,
-  /**
-   * Data submission
+  /**
+   * Data submission
    */
   submission: PropTypes.object,
-  /**
-   * Configuration option
+  /**
+   * Configuration option
    */
   options: PropTypes.shape({
     readOnly: PropTypes.bool,
@@ -2290,34 +2293,58 @@ function FormSettings(props) {
   }, i18n("Save settings")));
 }
 
-function SelectColumnFilter({
-  column
-}) {
+function useSelectColumnFilter(props) {
+  const {
+    column
+  } = props;
   const {
     id,
-    preFilteredRows,
-    filterValue,
-    setFilter
+    preFilteredRows
   } = column;
   const {
     choices: customChoices
   } = column;
-  const choices = customChoices || [...new Set(preFilteredRows.map(row => row.values[id]))].filter(value => value).map(value => ({
-    label: value,
-    value
-  }));
-  return /*#__PURE__*/React.createElement(Select, {
-    key: `filter-${column.id}`,
-    name: `filter-${column.id}`,
-    size: "sm",
+  const {
+    filterValue,
+    setFilter
+  } = column;
+  const choices = (() => {
+    if (customChoices) {
+      if (typeof customChoices === "function") {
+        return customChoices(props);
+      }
+      return customChoices;
+    }
+    return [...new Set(preFilteredRows.map(row => row.values[id]))].filter(value => value).map(value => ({
+      label: value,
+      value
+    }));
+  })();
+  const onChange = (_, value) => {
+    setFilter(value || undefined);
+  };
+  return {
     value: filterValue,
+    onChange,
     choices: [{
       value: "",
       label: "All"
-    }].concat(choices),
-    onChange: (name, value) => {
-      setFilter(value || undefined);
-    }
+    }].concat(choices)
+  };
+}
+function SelectColumnFilter(props) {
+  const {
+    value,
+    choices,
+    onChange
+  } = useSelectColumnFilter(props);
+  return /*#__PURE__*/React.createElement(Select, {
+    key: `filter-${props.column.id}`,
+    name: `filter-${props.column.id}`,
+    size: "sm",
+    value: value,
+    choices: choices,
+    onChange: onChange
   });
 }
 
@@ -7087,23 +7114,23 @@ function RemoveModal(_ref) {
 }
 
 class ReactComponent extends Components.components.field {
-  /**
-   * 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
   constructor(component, options, data) {
     super(component, options, data);
     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 = (value, flags) => {
       flags = flags || {};
@@ -7117,37 +7144,37 @@ class ReactComponent extends Components.components.field {
   get $reactNode() {
     return this.refs[`react-${this.id}`];
   }
-  /**
-   * 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.
    */
   init() {
     return super.init();
   }
-  /**
-   * 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.
    */
   destroy() {
     return super.destroy();
   }
-  /**
-   * 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
    */
   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 super.render(`<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.
    */
   async attach(element) {
     super.attach(element);
@@ -7166,9 +7193,9 @@ class ReactComponent extends Components.components.field {
       }
     }
   }
-  /**
-   * 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.
    */
   detach() {
     // @ts-ignore
@@ -7178,24 +7205,24 @@ class ReactComponent extends Components.components.field {
     }
     super.detach();
   }
-  /**
-   * Override this function to render a react component.
+  /**
+   * Override this function to render a react component.
    */
   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
   attachReact(element) {
     // eslint-disable-next-line react/no-render-return-value
     return ReactDOM.render(this.renderReact(), element);
   }
-  /**
-   * Override this function.
+  /**
+   * Override this function.
    */
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   detachReact(element) {
@@ -7203,11 +7230,11 @@ class ReactComponent extends Components.components.field {
       ReactDOM.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
    */
   setValue(value, flags) {
     if (this.reactInstance) {
@@ -7221,10 +7248,10 @@ class ReactComponent extends Components.components.field {
     }
     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 {*}
    */
   getValue() {
     if (this.reactInstance) {
@@ -7232,13 +7259,13 @@ class ReactComponent extends Components.components.field {
     }
     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}
    */
   checkValidity(data, dirty, rowData) {
     const valid = super.checkValidity(data, dirty, rowData);
@@ -7279,6 +7306,7 @@ function mapFormToColumns(form) {
       const column = {
         Header: component.label || component.title || component.key,
         accessor: `data.${component.key}`,
+        className: "text-center",
         Cell: props => /*#__PURE__*/React.createElement(DefaultCell, _extends({}, props, {
           render: value => cmp.asString(value)
         }))
@@ -7421,5 +7449,5 @@ function mapPagination({
   };
 }
 
-export { ActionsTable, Alert, ButtonTab, Card, DefaultArrowSort, DefaultCell, DefaultCellHeader, DefaultCellOperations, DefaultColumnFilter, DefaultOperationButton, Form, FormAccess, FormAction, FormBuilder, FormControl, FormEdit, FormEditCTAs, FormParameters, FormSettings, FormsTable, InputTags, InputText, LEFT_PAGE, Loader, Modal, Pagination, RIGHT_PAGE, ReactComponent, RemoveModal, Select, SelectColumnFilter, SliderColumnFilter, SubmissionsTable, Table, Tabs, callLast, defaultDisplayChoices, getOperationCallback, getPageNumbers, iconClass, mapFormToColumns, mapPagination, stopPropagationWrapper, swapElements, useCustomTable, useForm, useFormEdit, useModal, useOperations, useTooltip };
+export { ActionsTable, Alert, ButtonTab, Card, DefaultArrowSort, DefaultCell, DefaultCellHeader, DefaultCellOperations, DefaultColumnFilter, DefaultOperationButton, Form, FormAccess, FormAction, FormBuilder, FormControl, FormEdit, FormEditCTAs, FormParameters, FormSettings, FormsTable, InputTags, InputText, LEFT_PAGE, Loader, Modal, Pagination, RIGHT_PAGE, ReactComponent, RemoveModal, Select, SelectColumnFilter, SliderColumnFilter, SubmissionsTable, Table, Tabs, callLast, defaultDisplayChoices, getOperationCallback, getPageNumbers, iconClass, mapFormToColumns, mapPagination, stopPropagationWrapper, swapElements, useCustomTable, useForm, useFormEdit, useModal, useOperations, useSelectColumnFilter, useTooltip };
 //# sourceMappingURL=index.modern.js.map