@kaspernj/api-maker 1.0.401 → 1.0.402

package/src/table/header-column.jsx

@@ -1,6 +1,7 @@
 import BaseComponent from "../base-component"
 import classNames from "classnames"
 import {digs} from "diggerize"
+import Header from "./components/header"
 import {memo} from "react"
 import {Pressable, Text, View} from "react-native"
 import PropTypes from "prop-types"
@@ -8,51 +9,41 @@ import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import SortLink from "../bootstrap/sort-link"
 import useEventListener from "../use-event-listener.mjs"
-import {useRef} from "react"
+import Widths from "./widths"
 
 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
+    tableSettingColumn: PropTypes.object.isRequired,
+    width: PropTypes.number.isRequired,
+    widths: PropTypes.instanceOf(Widths).isRequired
   })
 
   setup() {
-    this.columnRef = useRef()
-
     useEventListener(window, "mousemove", this.tt.onWindowMouseMove)
     useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
 
     this.useStates({
       cursorX: undefined,
       originalWidth: undefined,
-      resizing: false,
-      width: this.p.tableSettingColumn.width()
+      resizing: false
     })
   }
 
   render() {
-    const {column, fixedTableLayout, table, tableSettingColumn} = this.p
-    const {width} = this.s
+    const {column, table, tableSettingColumn, width} = this.p
     const {defaultParams} = table.props
     const {query} = digs(table.collection, "query")
-    const ColumnInHeadComponent = table.columnInHeadComponent()
-    let sortLinkStyle
-    let textProps = {}
-
-    if (fixedTableLayout) {
-      sortLinkStyle = {whiteSpace: "nowrap", overflow: "hidden"}
-      textProps.ellipsizeMode="clip"
-      textProps.numberOfLines = 1
-    }
 
     return (
-      <ColumnInHeadComponent
-        className={classNames(...table.headerClassNameForColumn(column))}
-        data-identifier={tableSettingColumn.identifier()}
-        ref={this.tt.columnRef}
-        style={{width}}
+      <Header
+        dataSet={{
+          className: classNames(...table.headerClassNameForColumn(column)),
+          identifier: tableSettingColumn.identifier()
+        }}
+        onLayout={this.tt.onLayout}
+        style={{width: `${width}%`}}
         {...table.columnProps(column)}
       >
         <View style={{display: "flex", flexDirection: "row", alignItems: "center"}}>
@@ -61,40 +52,44 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
               attribute={tableSettingColumn.sortKey()}
               defaultParams={defaultParams}
               query={query}
-              style={sortLinkStyle}
+              style={{whiteSpace: "nowrap", overflow: "hidden"}}
               title={table.headerLabelForColumn(column)}
             />
           }
           {(!tableSettingColumn.hasSortKey() || !query) &&
-            <Text {...textProps}>
+            <Text ellipsizeMode="clip" numberOfLines={1}>
               {table.headerLabelForColumn(column)}
             </Text>
           }
-          {fixedTableLayout &&
-            <Pressable onPressIn={this.tt.onResizePressIn} style={{marginLeft: "auto", cursor: "col-resize"}}>
-              <Text>
-                |
-              </Text>
-            </Pressable>
-          }
+          <Pressable onPressIn={this.tt.onResizePressIn} style={{marginLeft: "auto", cursor: "col-resize"}}>
+            <Text>
+              |
+            </Text>
+          </Pressable>
         </View>
-      </ColumnInHeadComponent>
+      </Header>
     )
   }
 
+  onLayout = (e) => {
+    const {width} = e.nativeEvent.layout
+
+    this.currentWidth = width
+  }
+
   onResizeEnd = async () => {
     this.setState({cursorX: undefined, resizing: false})
 
-    await this.p.tableSettingColumn.update({
-      width: this.s.width
-    })
+    const width = this.p.widths.getWidthOfColumn(this.p.tableSettingColumn.identifier())
+
+    await this.p.tableSettingColumn.update({width})
   }
 
   onResizePressIn = (e) => {
     e.preventDefault()
     e.stopPropagation()
 
-    const originalWidth = this.s.width || this.tt.columnRef.current.offsetWidth
+    const originalWidth = this.currentWidth
     const cursorX = e.nativeEvent.pageX
 
     this.setState({
@@ -112,7 +107,10 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
       const diffX = newCursorX - cursorX
       const newWidth = originalWidth + diffX
 
-      this.setState({width: newWidth})
+      this.p.widths.setWidthOfColumn({
+        identifier: this.p.tableSettingColumn.identifier(),
+        width: newWidth
+      })
     }
   }
 

package/src/table/model-row.jsx

@@ -1,5 +1,7 @@
+import {Pressable, Text, View} from "react-native"
 import BaseComponent from "../base-component"
 import classNames from "classnames"
+import Column from "./components/column"
 import columnIdentifier from "./column-identifier.mjs"
 import columnVisible from "./column-visible.mjs"
 import {digs} from "diggerize"
@@ -8,6 +10,7 @@ import Link from "../link"
 import MoneyFormatter from "../money-formatter"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
+import Row from "./components/row"
 import {memo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 
@@ -16,22 +19,16 @@ const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox
 export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends BaseComponent {
   static propTypes = propTypesExact({
     cacheKey: PropTypes.string.isRequired,
-    columnComponent: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.string
-    ]).isRequired,
+    columnWidths: PropTypes.object.isRequired,
+    isSmallScreen: PropTypes.bool.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 {columnComponent: ColumnComponent, model, rowComponent: RowComponent} = this.p
+    const {model} = 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
@@ -40,42 +37,57 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
 
     let editPath, viewPath
 
-    if (editModelPath && model.can("edit")) editPath = editModelPath(this.modelCallbackArgs)
-    if (viewModelPath && model.can("show")) viewPath = viewModelPath(this.modelCallbackArgs)
+    if (editModelPath && model.can("edit")) {
+      editPath = editModelPath(this.modelCallbackArgs)
+    }
+
+    if (viewModelPath && model.can("show")) {
+      viewPath = viewModelPath(this.modelCallbackArgs)
+    }
 
     return (
-      <RowComponent className={`live-table-row ${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`} data-model-id={model.id()}>
+      <Row dataSet={{class: `${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`, modelId: model.id()}}>
         {workplace &&
-          <ColumnComponent className="workplace-column" style={{width: 25, textAlign: "center"}}>
-            <WorkerPluginsCheckbox currentWorkplace={currentWorkplace} model={model} />
-          </ColumnComponent>
+          <Column dataSet={{class: "workplace-column"}} style={{width: 25}}>
+            <WorkerPluginsCheckbox
+              currentWorkplace={currentWorkplace}
+              model={model}
+              style={{marginHorizontal: "auto"}}
+            />
+          </Column>
         }
         {columns && this.columnsContentFromColumns(model)}
         {!columns && columnsContent && columnsContent(this.modelCallbackArgs)}
-        <ColumnComponent className="actions-column">
+        <Column dataSet={{class: "actions-column"}} style={{flexDirection: "row"}}>
           {actionsContent && actionsContent(this.modelCallbackArgs)}
           {viewPath &&
-            <Link className="view-button" to={viewPath}>
-              <i className="fa fa-search la la-search" />
+            <Link dataSet={{class: "view-button"}} to={viewPath}>
+              <Text>
+                &#x1F50D;
+              </Text>
             </Link>
           }
           {editPath &&
-            <Link className="edit-button" to={editPath}>
-              <i className="fa fa-edit la la-edit" />
+            <Link dataSet={{class: "edit-button"}} to={editPath}>
+              <Text>
+                &#x270E;
+              </Text>
             </Link>
           }
           {destroyEnabled && model.can("destroy") &&
-            <a className="destroy-button" href="#" onClick={this.onDestroyClicked}>
-              <i className="fa fa-trash la la-trash" />
-            </a>
+            <Pressable dataSet={{class: "destroy-button"}} onPress={this.tt.onDestroyClicked}>
+              <Text>
+                &#x2715;
+              </Text>
+            </Pressable>
           }
-        </ColumnComponent>
-      </RowComponent>
+        </Column>
+      </Row>
     )
   }
 
   columnClassNamesForColumn (column) {
-    const classNames = ["live-table-column"]
+    const classNames = ["table--column"]
 
     if (column.commonProps && column.commonProps.className) classNames.push(column.commonProps.className)
     if (column.columnProps && column.columnProps.className) classNames.push(column.columnProps.className)
@@ -84,24 +96,30 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   }
 
   columnsContentFromColumns (model) {
-    const {preparedColumns} = this.p
-    const ColumnComponent = this.props.columnComponent
-
-    return preparedColumns?.map(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn) &&
-      <ColumnComponent
-        className={classNames(this.columnClassNamesForColumn(column))}
-        data-identifier={columnIdentifier(column)}
+    const {isSmallScreen, preparedColumns} = this.p
+
+    return preparedColumns?.map(({column, tableSettingColumn, width}) => columnVisible(column, tableSettingColumn) &&
+      <Column
+        dataSet={{
+          class: classNames(this.columnClassNamesForColumn(column)),
+          identifier: columnIdentifier(column)
+        }}
         key={columnIdentifier(column)}
+        style={{width: `${width}%`}}
         {...this.props.liveTable.columnProps(column)}
       >
-        <div className="live-table-column-label">
-          {this.props.liveTable.headerLabelForColumn(column)}
-        </div>
-        <div className="live-table-column-value">
+        {isSmallScreen &&
+          <View dataSet={{class: "table--column-label"}}>
+            <Text>
+              {this.props.liveTable.headerLabelForColumn(column)}
+            </Text>
+          </View>
+        }
+        <View dataSet={{class: "table--column-value"}}>
           {column.content && this.columnContentFromContentArg(column, model)}
           {!column.content && column.attribute && this.columnsContentFromAttributeAndPath(column, model)}
-        </div>
-      </ColumnComponent>
+        </View>
+      </Column>
     )
   }
 
@@ -135,7 +153,9 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     const modelColumn = attribute?.getColumn()
 
     if (modelColumn?.getType() == "date") {
-      return this.presentDateTime({apiMakerType: "date", value})
+      return (
+        <Text>{this.presentDateTime({apiMakerType: "date", value})}</Text>
+      )
     }
 
     return this.presentColumnValue(value)
@@ -151,9 +171,7 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     return modelCallbackArgs
   }
 
-  onDestroyClicked = async (e) => {
-    e.preventDefault()
-
+  onDestroyClicked = async () => {
     const {destroyMessage} = this.p.liveTable.props
     const {model} = this.p
 
@@ -174,21 +192,28 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
 
   presentColumnValue(value) {
     if (value instanceof Date) {
-      return this.presentDateTime({value})
+      return <Text>{this.presentDateTime({value})}</Text>
     } else if (MoneyFormatter.isMoney(value)) {
-      return MoneyFormatter.format(value)
+      return <Text>{MoneyFormatter.format(value)}</Text>
     } else if (typeof value == "boolean") {
       if (value) return I18n.t("js.shared.yes", {defaultValue: "Yes"})
 
-      return I18n.t("js.shared.no", {defaultValue: "No"})
+      return <Text>{I18n.t("js.shared.no", {defaultValue: "No"})}</Text>
     } else if (Array.isArray(value)) {
-      return value
-        .map((valuePart) => this.presentColumnValue(valuePart))
-        .filter((valuePart) => Boolean(valuePart))
-        .join(", ")
+      return (
+        <Text>
+          {value
+            .map((valuePart) => this.presentColumnValue(valuePart))
+            .filter((valuePart) => Boolean(valuePart))
+            .join(", ")
+          }
+        </Text>
+      )
+    } else if (typeof value == "string") {
+      return <Text>{value}</Text>
     }
 
-    return value
+    return <Text>{value}</Text>
   }
 
   presentDateTime({apiMakerType, value}) {

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

@@ -33,7 +33,7 @@ export default memo(shapeComponent(class ColumnRow extends BaseComponent {
     }
 
     return (
-      <View dataSet={{component: "api-maker--table--settings--column-row"}} style={{justifyContent: "center"}}>
+      <View dataSet={{component: "api-maker--table--settings--column-row"}} style={{zIndex: 1, justifyContent: "center"}}>
         <label style={{whiteSpace: "nowrap"}}>
           <input
             className="api-maker--table--setings--column-checkbox"

package/src/table/settings/index.jsx

@@ -1,6 +1,5 @@
 import "./style"
 import BaseComponent from "../../base-component"
-import Checkbox from "../../utils/checkbox"
 import columnIdentifier from "../column-identifier.mjs"
 import ColumnRow from "./column-row"
 import {memo, useRef} from "react"
@@ -12,7 +11,6 @@ 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
   })
@@ -30,7 +28,6 @@ export default memo(shapeComponent(class ApiMakerTableSettings extends BaseCompo
 
   render() {
     const {table} = this.p
-    const {fixedTableLayout} = this.s
     const {preparedColumns} = table.s
 
     return (
@@ -40,9 +37,6 @@ export default memo(shapeComponent(class ApiMakerTableSettings extends BaseCompo
             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
@@ -55,12 +49,6 @@ export default memo(shapeComponent(class ApiMakerTableSettings extends BaseCompo
     )
   }
 
-  onFixedTableChecked = async (checked) => {
-    await this.tableSetting().update({fixed_table_layout: checked})
-    this.setState({fixedTableLayout: checked})
-    this.p.onFixedTableLayoutChanged(checked)
-  }
-
   onWindowMouseUp = (e) => {
     if (this.tt.rootRef.current && !this.tt.rootRef.current.contains(e.target)) {
       this.p.onRequestClose()

package/src/table/style.scss

@@ -50,10 +50,6 @@
     }
 
     .live-table-column {
-      .live-table-column-label {
-        display: none;
-      }
-
       &[data-text-align="center"] {
         .live-table-column-value {
           text-align: center;