@kaspernj/api-maker 1.0.438 → 1.0.440

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.438",
+  "version": "1.0.440",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/table/header-column.jsx

@@ -1,15 +1,12 @@
 import BaseComponent from "../base-component"
 import classNames from "classnames"
-import {digs} from "diggerize"
 import Header from "./components/header"
 import HeaderColumnContent from "./header-column-content"
 import memo from "set-state-compare/src/memo"
-import {Platform, Pressable, View} from "react-native"
+import {Platform, Pressable} from "react-native"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component"
-import SortLink from "../bootstrap/sort-link"
-import Text from "../utils/text"
 import useBreakpoint from "../use-breakpoint"
 import useEventListener from "../use-event-listener.mjs"
 import Widths from "./widths"
@@ -40,13 +37,11 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
   }
 
   render() {
-    const {breakpoint, mdUp, smDown} = this.tt
+    const {mdUp} = this.tt
     const {column, resizing, table, tableSettingColumn, width} = this.p
-    const {defaultParams} = table.props
-    const {styleForHeader, styleForHeaderText} = table.tt
-    const {query} = digs(table.collection, "query")
-    const columnProps = table.columnProps(column)
-    const {style, ...restColumnProps} = columnProps
+    const {styleForHeader} = table.tt
+    const headerProps = table.headerProps(column)
+    const {style, ...restColumnProps} = headerProps
     const actualStyle = Object.assign(
       {
         cursor: resizing ? "col-resize" : undefined,

package/src/table/table.jsx

@@ -9,6 +9,7 @@ import debounce from "debounce"
 import Filters from "./filters"
 import FlatList from "./components/flat-list"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
+import {Form} from "../form"
 import Header from "./components/header"
 import HeaderColumn from "./header-column"
 import HeaderSelect from "./header-select"
@@ -157,6 +158,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       columns: columnsAsArray,
       currentWorkplace: undefined,
       currentWorkplaceCount: null,
+      filterForm: null,
       identifier: () => this.props.identifier || `${collectionKey}-default`,
       lastUpdate: () => new Date(),
       preload: undefined,
@@ -529,18 +531,20 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   filterForm = () => {
     const {filterFormRef, submitFilter, submitFilterDebounce} = this.tt
     const {filterContent, filterSubmitButton} = this.p
+    const {queryQName} = this.s
     const {filterSubmitLabel} = this.props
     const {qParams} = digs(this.collection, "qParams")
 
     return (
-      <form className="live-table--filter-form" onSubmit={this.onFilterFormSubmit} ref={filterFormRef}>
+      <Form className="live-table--filter-form" formRef={filterFormRef} onSubmit={this.onFilterFormSubmit} setForm={this.setStates.filterForm}>
         {"s" in qParams &&
           <input name="s" type="hidden" value={qParams.s} />
         }
         {filterContent({
           onFilterChanged: submitFilter,
           onFilterChangedWithDelay: submitFilterDebounce,
-          qParams
+          qParams,
+          queryQName
         })}
         {filterSubmitButton &&
           <input
@@ -550,7 +554,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
             value={filterSubmitLabel || this.t(".filter", {defaultValue: "Filter"})}
           />
         }
-      </form>
+      </Form>
     )
   }
 
@@ -633,16 +637,21 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   }
 
   styleForHeader = ({column, columnIndex, style, type}) => {
+    const {mdUp} = this.tt
     const defaultStyle = {
       flexDirection: "row",
       alignItems: "center",
       padding: 8
     }
 
-    if (type != "actions" && this.tt.mdUp && this.p.styleUI) {
+    if (type != "actions" && mdUp && this.p.styleUI) {
       defaultStyle.borderRight = "1px solid #dbdbdb"
     }
 
+    if (mdUp) {
+
+    }
+
     const actualStyle = Object.assign(
       defaultStyle,
       style
@@ -763,6 +772,22 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     return props
   }
 
+  headerProps(column) {
+    const props = {}
+
+    if (column.textCenter) {
+      props.style ||= {}
+      props.style.justifyContent = "center"
+    }
+
+    if (column.textRight) {
+      props.style ||= {}
+      props.style.justifyContent = "end"
+    }
+
+    return props
+  }
+
   columnWidths() {
     const columnWidths = {}
 
@@ -786,7 +811,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   )
 
   headerClassNameForColumn(column) {
-    const classNames = ["live-table-header"]
+    const classNames = []
 
     if (column.commonProps && column.commonProps.className) classNames.push(column.commonProps.className)
     if (column.headerProps && column.headerProps.className) classNames.push(column.headerProps.className)
@@ -822,11 +847,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     throw new Error("No 'label' or 'attribute' was given")
   }
 
-  onFilterFormSubmit = (e) => {
-    e.preventDefault()
-    this.submitFilter()
-  }
-
+  onFilterFormSubmit = () => this.submitFilter()
   onRequestCloseSettings = () => this.setState({showSettings: false})
 
   onSettingsClicked = (e) => {

package/src/use-input.mjs

@@ -63,7 +63,7 @@ const useInput = ({props, wrapperOptions}) => {
   const inputDefaultValue = useCallback(() => {
     if ("defaultValue" in s.props) {
       return formatValue(s.props.defaultValue)
-    } else if (s.props.model) {
+    } else if (s.props.model && s.props.attribute) {
       if (!s.props.model[s.props.attribute]) {
         throw new Error(`No such attribute defined on resource: ${digg(s.props.model.modelClassData(), "name")}#${s.props.attribute}`)
       }