@kaspernj/api-maker 1.0.381 → 1.0.382

package/package.json

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

package/src/table/header-column.jsx

@@ -13,6 +13,7 @@ import {useRef} from "react"
 export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseComponent {
   static propTypes = propTypesExact({
     column: PropTypes.object.isRequired,
+    fixedTableLayout: PropTypes.bool.isRequired,
     table: PropTypes.object.isRequired,
     tableSettingColumn: PropTypes.object.isRequired
   })
@@ -32,7 +33,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
   }
 
   render() {
-    const {column, table, tableSettingColumn} = this.p
+    const {column, fixedTableLayout, table, tableSettingColumn} = this.p
     const {width} = this.s
     const {defaultParams} = table.props
     const {query} = digs(table.collection, "query")
@@ -55,11 +56,13 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
               {table.headerLabelForColumn(column)}
             </Text>
           }
-          <Pressable onPressIn={this.tt.onResizePressIn} style={{marginLeft: "auto", cursor: "col-resize"}}>
-            <Text>
-              |
-            </Text>
-          </Pressable>
+          {fixedTableLayout &&
+            <Pressable onPressIn={this.tt.onResizePressIn} style={{marginLeft: "auto", cursor: "col-resize"}}>
+              <Text>
+                |
+              </Text>
+            </Pressable>
+          }
         </View>
       </ColumnInHeadComponent>
     )

package/src/table/model-row.jsx

@@ -7,22 +7,31 @@ import * as inflection from "inflection"
 import Link from "../link"
 import MoneyFormatter from "../money-formatter"
 import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
 import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 
 const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox"))
 
 export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends BaseComponent {
-  static propTypes = {
+  static propTypes = propTypesExact({
     cacheKey: PropTypes.string.isRequired,
+    columnComponent: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.string
+    ]).isRequired,
     model: PropTypes.object.isRequired,
     liveTable: PropTypes.object.isRequired,
     preparedColumns: PropTypes.array,
+    rowComponent: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.string
+    ]).isRequired,
     tableSettingFullCacheKey: PropTypes.string.isRequired
-  }
+  })
 
   render() {
-    const {model} = this.p
+    const {columnComponent: ColumnComponent, model, rowComponent: RowComponent} = this.p
     const {modelClass, workplace} = this.p.liveTable.p
     const {actionsContent, columnsContent, destroyEnabled, editModelPath, viewModelPath} = this.p.liveTable.props
     const {columns, currentWorkplace} = this.p.liveTable.state
@@ -34,9 +43,6 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     if (editModelPath && model.can("edit")) editPath = editModelPath(this.modelCallbackArgs)
     if (viewModelPath && model.can("show")) viewPath = viewModelPath(this.modelCallbackArgs)
 
-    const RowComponent = this.props.rowComponent
-    const ColumnComponent = this.props.columnComponent
-
     return (
       <RowComponent className={`live-table-row ${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`} data-model-id={model.id()}>
         {workplace &&

package/src/table/settings/column-row.jsx

@@ -0,0 +1,88 @@
+import BaseComponent from "../../base-component"
+import columnIdentifier from "../column-identifier.mjs"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {memo, useEffect, useRef} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {View} from "react-native"
+
+export default memo(shapeComponent(class ColumnRow extends BaseComponent {
+  static propTypes = propTypesExact({
+    column: PropTypes.object.isRequired,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired
+  })
+
+  setup() {
+    this.checked = this.p.tableSettingColumn.visible()
+    this.checkboxRef = useRef()
+
+    useEffect(() => {
+      this.updateCheckboxChecked()
+    }, [this.checked])
+  }
+
+  render() {
+    const {column, table, tableSettingColumn} = this.p
+    const checkboxProps = {}
+
+    if (tableSettingColumn.visible() === true) {
+      checkboxProps.checked = "checked"
+    } else if (tableSettingColumn.visible() === null) {
+      checkboxProps.indeterminate = "indeterminate"
+    }
+
+    return (
+      <View dataSet={{component: "api-maker--table--settings--column-row"}} style={{justifyContent: "center"}}>
+        <label style={{whiteSpace: "nowrap"}}>
+          <input
+            className="api-maker--table--setings--column-checkbox"
+            data-identifier={columnIdentifier(column)}
+            onChange={this.onCheckboxChange}
+            ref={this.checkboxRef}
+            type="checkbox"
+            {...checkboxProps}
+          />
+          {table.headerLabelForColumn(column)}
+        </label>
+      </View>
+    )
+  }
+
+  onCheckboxChange = () => {
+    const {checked} = this
+
+    if (checked === true) {
+      this.checked = null
+    } else if (checked === null) {
+      this.checked = false
+    } else {
+      this.checked = true
+    }
+
+    this.updateCheckboxChecked()
+    this.updateTableSettingColumn()
+  }
+
+  updateCheckboxChecked() {
+    const {checked} = this.tt
+
+    if (checked === true) {
+      this.checkboxRef.current.checked = true
+      this.checkboxRef.current.indeterminate = undefined
+    } else if (checked === null) {
+      this.checkboxRef.current.checked = undefined
+      this.checkboxRef.current.indeterminate = true
+    } else {
+      this.checkboxRef.current.checked = undefined
+      this.checkboxRef.current.indeterminate = undefined
+    }
+  }
+
+  async updateTableSettingColumn() {
+    const {table, tableSettingColumn} = this.p
+
+    await tableSettingColumn.update({visible: this.checked})
+    table.updateSettingsFullCacheKey()
+  }
+}))

package/src/table/settings/index.jsx

@@ -1,107 +1,53 @@
 import "./style"
+import BaseComponent from "../../base-component"
+import Checkbox from "../../utils/checkbox"
 import columnIdentifier from "../column-identifier.mjs"
-import EventListener from "../../event-listener.jsx"
+import ColumnRow from "./column-row"
+import {memo, useRef} from "react"
 import PropTypes from "prop-types"
-import React from "react"
-
-class ColumnRow extends React.PureComponent {
-  static propTypes = {
-    column: PropTypes.object.isRequired,
-    table: PropTypes.object.isRequired,
-    tableSettingColumn: PropTypes.object.isRequired
-  }
-
-  checked = this.props.tableSettingColumn.visible()
-  checkboxRef = React.createRef()
-
-  componentDidMount() {
-    this.updateCheckboxChecked()
-  }
-
-  componentDidUpdate() {
-    this.updateCheckboxChecked()
-  }
-
-  render() {
-    const {column, table, tableSettingColumn} = this.props
-    const checkboxProps = {}
-
-    if (tableSettingColumn.visible() === true) {
-      checkboxProps.checked = "checked"
-    } else if (tableSettingColumn.visible() === null) {
-      checkboxProps.indeterminate = "indeterminate"
-    }
-
-    return (
-      <div className="api-maker--table--settings--column-row">
-        <label style={{whiteSpace: "nowrap"}}>
-          <input
-            className="api-maker--table--setings--column-checkbox"
-            data-identifier={columnIdentifier(column)}
-            onChange={this.onCheckboxChange}
-            ref={this.checkboxRef}
-            type="checkbox"
-            {...checkboxProps}
-          />
-          {table.headerLabelForColumn(column)}
-        </label>
-      </div>
-    )
-  }
-
-  onCheckboxChange = () => {
-    const {checked} = this
-
-    if (checked === true) {
-      this.checked = null
-    } else if (checked === null) {
-      this.checked = false
-    } else {
-      this.checked = true
-    }
-
-    this.updateCheckboxChecked()
-    this.updateTableSettingColumn()
-  }
-
-  updateCheckboxChecked() {
-    const {checked} = this
-
-    if (checked === true) {
-      this.checkboxRef.current.checked = true
-      this.checkboxRef.current.indeterminate = undefined
-    } else if (checked === null) {
-      this.checkboxRef.current.checked = undefined
-      this.checkboxRef.current.indeterminate = true
-    } else {
-      this.checkboxRef.current.checked = undefined
-      this.checkboxRef.current.indeterminate = undefined
-    }
-  }
-
-  async updateTableSettingColumn() {
-    const {table, tableSettingColumn} = this.props
-
-    await tableSettingColumn.update({visible: this.checked})
-    table.updateSettingsFullCacheKey()
-  }
-}
-
-export default class ApiMakerTableSettings extends React.PureComponent {
-  static propTypes = {
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import useEventListener from "../../use-event-listener"
+import {Text, View} from "react-native"
+
+export default memo(shapeComponent(class ApiMakerTableSettings extends BaseComponent {
+  static propTypes = propTypesExact({
+    onFixedTableLayoutChanged: PropTypes.func.isRequired,
     onRequestClose: PropTypes.func.isRequired,
     table: PropTypes.object.isRequired
+  })
+
+  setup() {
+    this.rootRef = useRef()
+
+    useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
+    this.useStates({
+      fixedTableLayout: this.tableSetting().fixedTableLayout()
+    })
   }
 
-  rootRef = React.createRef()
+  tableSetting = () => this.p.table.s.tableSetting
 
   render() {
-    const {table} = this.props
-    const {preparedColumns} = table.state
+    const {table} = this.p
+    const {fixedTableLayout} = this.s
+    const {preparedColumns} = table.s
 
     return (
-      <div className="api-maker--table--settings" ref={this.rootRef}>
-        <EventListener event="mouseup" onCalled={this.onWindowMouseUp} target={window} />
+      <div className="api-maker--table--settings" ref={this.tt.rootRef}>
+        <View style={{marginBottom: 5}}>
+          <Text style={{fontSize: 16, fontWeight: "bold"}}>
+            Settings
+          </Text>
+        </View>
+        <View>
+          <Checkbox checked={fixedTableLayout} label="Fixed table" onValueChange={this.tt.onFixedTableChecked} />
+        </View>
+        <View style={{marginBottom: 5}}>
+          <Text style={{fontSize: 16, fontWeight: "bold"}}>
+            Columns
+          </Text>
+        </View>
         {preparedColumns?.map(({column, tableSettingColumn}) =>
           <ColumnRow column={column} key={columnIdentifier(column)} table={table} tableSettingColumn={tableSettingColumn} />
         )}
@@ -109,9 +55,15 @@ export default class ApiMakerTableSettings extends React.PureComponent {
     )
   }
 
+  onFixedTableChecked = async (checked) => {
+    await this.tableSetting().update({fixedTableLayout: true})
+    this.setState({fixedTableLayout: checked})
+    this.p.onFixedTableLayoutChanged(checked)
+  }
+
   onWindowMouseUp = (e) => {
-    if (this.rootRef.current && !this.rootRef.current.contains(e.target)) {
-      this.props.onRequestClose()
+    if (this.tt.rootRef.current && !this.tt.rootRef.current.contains(e.target)) {
+      this.p.onRequestClose()
     }
   }
-}
+}))

package/src/table/style.scss

@@ -1,8 +1,10 @@
 @import "./variables";
 
 .api-maker--table {
-  table {
-    table-layout: fixed;
+  &[data-fixed-table-layout="true"] {
+    table {
+      table-layout: fixed;
+    }
   }
 
   .live-table-header {

package/src/table/table.jsx

@@ -99,6 +99,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.useStates({
       columns: columnsAsArray,
       currentWorkplace: undefined,
+      fixedTableLayout: undefined,
       identifier: () => this.props.identifier || `${collectionKey}-default`,
       preload: undefined,
       preparedColumns: undefined,
@@ -163,6 +164,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const {columns, preload} = this.tableSettings.preparedColumns(tableSetting)
 
     this.setState({
+      fixedTableLayout: tableSetting.fixedTableLayout(),
       preparedColumns: columns,
       preload: this.mergedPreloads(preload),
       tableSetting,
@@ -219,7 +221,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }
 
     return (
-      <div className={this.className()}>
+      <div className={this.className()} data-fixed-table-layout={this.s.fixedTableLayout}>
         {showNoRecordsAvailableContent &&
           <div className="live-table--no-records-available-content">
             {noRecordsAvailableContent({models, qParams, overallCount})}
@@ -395,6 +397,10 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.setState({showFilters: !this.state.showFilters})
   }
 
+  onFixedTableLayoutChanged = (fixedTableLayout) => {
+    this.setState({fixedTableLayout})
+  }
+
   onPerPageChanged = (e) => {
     const {queryName} = this.s
     const newPerPageValue = digg(e, "target", "value")
@@ -419,7 +425,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         </a>
         <span style={{position: "relative"}}>
           {showSettings &&
-            <Settings onRequestClose={this.tt.onRequestCloseSettings} table={this} />
+            <Settings onFixedTableLayoutChanged={this.tt.onFixedTableLayoutChanged} onRequestClose={this.tt.onRequestCloseSettings} table={this} />
           }
           <a className="settings-button" href="#" onClick={this.tt.onSettingsClicked}>
             <i className="fa fa-fw fa-gear la la-fw la-gear" />
@@ -431,7 +437,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
   tableContent () {
     const {workplace} = this.p
-    const {breakpoint} = this.tt
     const {currentWorkplace, preparedColumns, tableSettingFullCacheKey} = this.s
     const {models, query} = digs(this.collection, "models", "query")
     const ColumnInHeadComponent = this.columnInHeadComponent()
@@ -463,7 +468,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         <BodyComponent>
           {models.map((model) =>
             <ModelRow
-              breakPoint={breakpoint}
               cacheKey={model.cacheKey()}
               columnComponent={this.columnComponent()}
               key={model.id()}
@@ -537,7 +541,13 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   rowComponent = () => this.responsiveComponent("tr")
 
   headersContentFromColumns = () => this.s.preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
-    <HeaderColumn column={column} key={tableSettingColumn.identifier()} table={this} tableSettingColumn={tableSettingColumn} />
+    <HeaderColumn
+      column={column}
+      fixedTableLayout={this.s.fixedTableLayout}
+      key={tableSettingColumn.identifier()}
+      table={this}
+      tableSettingColumn={tableSettingColumn}
+    />
   )
 
   headerClassNameForColumn (column) {

package/src/utils/checkbox.jsx

@@ -0,0 +1,33 @@
+import BaseComponent from "../base-component"
+import {CheckBox, Text, View} from "react-native"
+import {memo} from "react"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+
+export default memo(shapeComponent(class ApiMakerUtilsCheckbox extends BaseComponent {
+  static defaultProps = {
+    label: undefined
+  }
+
+  static propTypes = propTypesExact({
+    checked: PropTypes.bool.isRequired,
+    label: PropTypes.string,
+    onValueChange: PropTypes.func.isRequired
+  })
+
+  render() {
+    const {checked, label, onValueChange} = this.p
+
+    return (
+      <View dataSet={{component: "api-maker--utils--checkbox"}} style={{flexDirection: "row", alignItems: "center"}}>
+        <CheckBox onValueChange={onValueChange} value={checked} />
+        {label &&
+          <Text style={{marginLeft: 3}}>
+            {label}
+          </Text>
+        }
+      </View>
+    )
+  }
+}))