@kaspernj/api-maker 1.0.380 → 1.0.381

package/package.json

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

package/src/bootstrap/live-table/model-row.jsx

@@ -1,10 +1,9 @@
 import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
+import Link from "../../link"
 import MoneyFormatter from "../../money-formatter"
 import PropTypes from "prop-types"
 
-import Link from "../../link"
-
 export default class ApiMakerBootStrapLiveTableModelRow extends React.PureComponent {
   static propTypes = {
     model: PropTypes.object.isRequired,

package/src/bootstrap/paginate.jsx

@@ -20,8 +20,14 @@ export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends BaseC
   setup() {
     const {result} = this.p
 
-    this.totalPages = useMemo(() => Math.ceil(this.p.result.count() / this.p.result.perPage()), [result.currentPage(), result.totalCount(), result.totalPages()])
-    this.pages = useMemo(() => this.calculatePages(), [result.currentPage(), result.totalCount(), result.totalPages()])
+    this.totalPages = useMemo(
+      () => Math.ceil(this.p.result.count() / this.p.result.perPage()),
+      [result.currentPage(), result.totalCount(), result.totalPages()]
+    )
+    this.pages = useMemo(
+      () => this.calculatePages(),
+      [result.currentPage(), result.totalCount(), result.totalPages()]
+    )
   }
 
   calculatePages () {
@@ -131,7 +137,12 @@ export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends BaseC
             </li>
           }
           {pages.map((page) =>
-            <li className={`page-item ${this.isPageActiveClass(page)}`} key={`page-${page}`}>
+            <li
+              className={`page-item ${this.isPageActiveClass(page)}`}
+              data-active={this.isPageActiveClass(page) == "active"}
+              data-page={page}
+              key={`page-${page}`}
+            >
               {this.isPageActiveClass(page) == "active" &&
                 page
               }

package/src/bootstrap/sort-link.jsx

@@ -1,9 +1,8 @@
 import BaseComponent from "../base-component"
-import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
 import PropTypes from "prop-types"
 import qs from "qs"
-import {memo, useMemo} from "react"
+import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import urlEncode from "../url-encode.mjs"
 
@@ -31,12 +30,13 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
   href () {
     const qParams = this.qParams()
     const {queryParams, searchKey} = this.tt
+    const newQueryParams = {...queryParams}
 
     qParams.s = `${this.attribute()} ${this.sortMode()}` // eslint-disable-line id-length
 
-    queryParams[searchKey] = JSON.stringify(qParams)
+    newQueryParams[searchKey] = JSON.stringify(qParams)
 
-    const newParams = qs.stringify(queryParams, {encoder: urlEncode})
+    const newParams = qs.stringify(newQueryParams, {encoder: urlEncode})
     const newPath = `${location.pathname}?${newParams}`
 
     return newPath
@@ -56,17 +56,15 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
     const {attribute, className, defaultParams, linkComponent, onChanged, query, title, ...restProps} = this.props
 
     return (
-      <>
-        <LinkComponent
-          className={this.className()}
-          data-attribute={attribute}
-          data-sort-mode={this.sortMode()}
-          to={this.href()}
-          {...restProps}
-        >
-          {this.title()}
-        </LinkComponent>
-      </>
+      <LinkComponent
+        className={this.className()}
+        data-attribute={attribute}
+        data-sort-mode={this.sortMode()}
+        to={this.href()}
+        {...restProps}
+      >
+        {this.title()}
+      </LinkComponent>
     )
   }
 
@@ -78,16 +76,11 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
     return classNames.join(" ")
   }
 
-  linkComponent () {
-    if (this.props.linkComponent) return this.props.linkComponent
-
-    return Link
-  }
+  linkComponent = () => this.props.linkComponent || Link
 
   qParams() {
     const {defaultParams} = this.props
-    const {queryParams} = this.tt
-    const {searchKey} = digs(this, "searchKey")
+    const {queryParams, searchKey} = this.tt
 
     if (searchKey in queryParams) {
       return JSON.parse(queryParams[searchKey])
@@ -105,7 +98,7 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
   }
 
   title () {
-    const {attribute, query} = digs(this.props, "attribute", "query")
+    const {attribute, query} = this.p
     const {title} = this.props
 
     if (title) return title

package/src/table/filters/filter-form.jsx

@@ -1,4 +1,5 @@
 import AttributeElement from "./attribute-element"
+import BaseComponent from "../../base-component"
 import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
 import Input from "../../inputs/input"
@@ -9,9 +10,9 @@ import ReflectionElement from "./reflection-element"
 import ScopeElement from "./scope-element"
 import Select from "../../inputs/select"
 import Services from "../../services.mjs"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 
-export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends BaseComponent {
   static propTypes = PropTypesExact({
     filter: PropTypes.object,
     modelClass: PropTypes.func.isRequired,
@@ -55,7 +56,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
   render() {
     const {valueInputRef} = digs(this, "valueInputRef")
     const currentModelClass = this.currentModelClass()
-    const {attribute, predicate, predicates, scope, value} = digs(this.state, "attribute", "predicate", "scope", "predicates", "value")
+    const {attribute, predicate, predicates, scope, value} = this.s
     let submitEnabled = false
 
     if (attribute && predicate) {
@@ -66,7 +67,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
 
     return (
       <div className="api-maker--table--filters--filter-form">
-        <form onSubmit={digg(this, "onSubmit")}>
+        <form onSubmit={this.tt.onSubmit}>
           <div>
             {this.currentPathParts().map(({translation}, pathPartIndex) =>
               <span key={`${pathPartIndex}-${translation}`}>
@@ -85,7 +86,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
                 <ReflectionElement
                   currentModelClass={currentModelClass}
                   key={reflection.name()}
-                  onClick={digg(this, "onReflectionClicked")}
+                  onClick={this.tt.onReflectionClicked}
                   reflection={reflection}
                 />
               )}
@@ -97,7 +98,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
                   attribute={attribute}
                   currentModelClass={currentModelClass}
                   key={attribute.name()}
-                  onClick={digg(this, "onAttributeClicked")}
+                  onClick={this.tt.onAttributeClicked}
                 />
               )}
               {currentModelClass.ransackableScopes().map((scope) =>
@@ -105,7 +106,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
                   active={scope.name() == this.state.scope?.name()}
                   key={scope.name()}
                   scope={scope}
-                  onScopeClicked={digg(this, "onScopeClicked")}
+                  onScopeClicked={this.tt.onScopeClicked}
                 />
               )}
             </div>
@@ -115,7 +116,7 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
                   className="predicate-select"
                   defaultValue={predicate?.name}
                   includeBlank
-                  onChange={digg(this, "onPredicateChanged")}
+                  onChange={this.tt.onPredicateChanged}
                   options={predicates.map((predicate) => digg(predicate, "name"))}
                 />
               }
@@ -136,14 +137,10 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
     )
   }
 
-  currentModelClass() {
-    const {path} = digs(this.state, "path")
-
-    return this.currentModelClassFromPath(path)
-  }
+  currentModelClass = () => this.currentModelClassFromPath(this.s.path)
 
   currentModelClassFromPath(path) {
-    const {modelClass} = digs(this.props, "modelClass")
+    const {modelClass} = this.p
     let currentModelClass = modelClass
 
     for (const pathPart of path) {
@@ -163,8 +160,8 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
   }
 
   currentPathParts() {
-    const {modelClass} = digs(this.props, "modelClass")
-    const {path} = digs(this.state, "path")
+    const {modelClass} = this.p
+    const {path} = this.s
     const result = []
     let currentModelClass = modelClass
 
@@ -225,11 +222,11 @@ export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends
   onSubmit = (e) => {
     e.preventDefault()
 
-    const {filter, querySearchName} = digs(this.props, "filter", "querySearchName")
-    const {attribute, path, predicate, scope} = digs(this.state, "attribute", "path", "predicate", "scope")
+    const {filter, querySearchName} = this.p
+    const {attribute, path, predicate, scope} = this.s
     const {filterIndex} = digs(filter, "filterIndex")
     const searchParams = Params.parse()[querySearchName] || {}
-    const value = digg(this, "valueInputRef", "current", "value")
+    const value = digg(this.tt.valueInputRef, "current", "value")
     const newSearchParams = {
       p: path,
       v: value

package/src/table/filters/index.jsx

@@ -1,3 +1,4 @@
+import BaseComponent from "../../base-component"
 import {digg, digs} from "diggerize"
 import Filter from "./filter"
 import FilterForm from "./filter-form"
@@ -5,13 +6,13 @@ import LoadSearchModal from "./load-search-modal"
 import SaveSearchModal from "./save-search-modal"
 import PropTypes from "prop-types"
 import {memo} from "react"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import {TableSearch} from "../../models.mjs.erb"
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 import useQueryParams from "on-location-changed/src/use-query-params"
 import {View} from "react-native"
 
-export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeComponent {
+export default memo(shapeComponent(class ApiMakerTableFilters extends BaseComponent {
   static propTypes = {
     currentUser: PropTypes.object,
     modelClass: PropTypes.func.isRequired,
@@ -38,7 +39,7 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
     const currentFilters = this.currentFilters()
 
     return (
-      <View dataSet={{class: "api-maker--table--filters"}}>
+      <View dataSet={{class: "api-maker--table--filters"}} style={{alignItems: "flex-start"}}>
         {filter &&
           <FilterForm
             filter={filter}
@@ -74,21 +75,21 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
             {...filterData}
           />
         )}
-        <div className="filter-actions">
-          <button className="add-new-filter-button" onClick={digg(this, "onAddFilterClicked")}>
+        <View className="filter-actions" style={{flexDirection: "row", marginTop: 10}}>
+          <button className="add-new-filter-button" onClick={this.tt.onAddFilterClicked}>
             {this.t(".add_new_filter", {defaultValue: "Add new filter"})}
           </button>
           {currentUser &&
             <>
-              <button className="save-search-button" onClick={digg(this, "onSaveSearchClicked")}>
+              <button className="save-search-button" onClick={this.tt.onSaveSearchClicked} style={{marginLeft: 10}}>
                 {this.t(".save_search", {defaultValue: "Save search"})}
               </button>
-              <button className="load-search-button" onClick={digg(this, "onLoadSearchClicked")}>
+              <button className="load-search-button" onClick={this.tt.onLoadSearchClicked} style={{marginLeft: 10}}>
                 {this.t(".load_search", {defaultValue: "Load search"})}
               </button>
             </>
           }
-        </div>
+        </View>
       </View>
     )
   }