@kaspernj/api-maker 1.0.408 → 1.0.410

package/package.json

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

package/src/bootstrap/sort-link.jsx

@@ -54,7 +54,7 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
 
   render () {
     const LinkComponent = this.linkComponent()
-    const {attribute, className, defaultParams, linkComponent, onChanged, query, title, ...restProps} = this.props
+    const {attribute, className, defaultParams, linkComponent, onChanged, query, textProps, title, ...restProps} = this.props
 
     return (
       <LinkComponent
@@ -67,7 +67,7 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
         to={this.href()}
         {...restProps}
       >
-        <Text>
+        <Text {...textProps}>
           {this.title()}
         </Text>
       </LinkComponent>

package/src/table/header-column.jsx

@@ -3,7 +3,7 @@ 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 {Platform, Pressable, Text, View} from "react-native"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component"
@@ -14,6 +14,7 @@ import Widths from "./widths"
 export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseComponent {
   static propTypes = propTypesExact({
     column: PropTypes.object.isRequired,
+    resizing: PropTypes.bool.isRequired,
     table: PropTypes.object.isRequired,
     tableSettingColumn: PropTypes.object.isRequired,
     width: PropTypes.number.isRequired,
@@ -32,8 +33,9 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
   }
 
   render() {
-    const {column, table, tableSettingColumn, width} = this.p
+    const {column, resizing, table, tableSettingColumn, width} = this.p
     const {defaultParams} = table.props
+    const {styleForHeader, styleForHeaderText} = table.tt
     const {query} = digs(table.collection, "query")
 
     return (
@@ -43,7 +45,10 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
           identifier: tableSettingColumn.identifier()
         }}
         onLayout={this.tt.onLayout}
-        style={{width: `${width}%`}}
+        style={styleForHeader({style: {
+          cursor: resizing ? "col-resize" : undefined,
+          width: `${width}%`
+        }})}
         {...table.columnProps(column)}
       >
         <View style={{display: "flex", flexDirection: "row", alignItems: "center"}}>
@@ -53,6 +58,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
               defaultParams={defaultParams}
               query={query}
               style={{whiteSpace: "nowrap", overflow: "hidden"}}
+              textProps={{ellipsizeMode: "clip", numberOfLines: 1, style: styleForHeaderText()}}
               title={table.headerLabelForColumn(column)}
             />
           }
@@ -61,12 +67,20 @@ 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>
         </View>
+        <Pressable
+          onMouseDown={Platform.OS == "web" ? this.tt.onResizeMouseDown : undefined}
+          onPressIn={this.tt.onResizePressIn}
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            width: 10,
+            height: "100%",
+            cursor: "col-resize",
+            zIndex: 9999
+          }}
+        />
       </Header>
     )
   }
@@ -79,12 +93,29 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
 
   onResizeEnd = async () => {
     this.setState({cursorX: undefined, resizing: false})
+    this.p.table.setState({resizing: false})
 
     const width = this.p.widths.getWidthOfColumn(this.p.tableSettingColumn.identifier())
 
     await this.p.tableSettingColumn.update({width})
   }
 
+  // Otherwise text is selectable on web
+  onResizeMouseDown = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const originalWidth = this.currentWidth
+    const cursorX = e.nativeEvent.pageX
+
+    this.setState({
+      cursorX,
+      originalWidth,
+      resizing: true
+    })
+    this.p.table.setState({resizing: true})
+  }
+
   onResizePressIn = (e) => {
     e.preventDefault()
     e.stopPropagation()
@@ -97,6 +128,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
       originalWidth,
       resizing: true
     })
+    this.p.table.setState({resizing: true})
   }
 
   onWindowMouseMove = (e) => {

package/src/table/model-row.jsx

@@ -21,6 +21,7 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   static propTypes = propTypesExact({
     cacheKey: PropTypes.string.isRequired,
     columnWidths: PropTypes.object.isRequired,
+    index: PropTypes.number.isRequired,
     isSmallScreen: PropTypes.bool.isRequired,
     model: PropTypes.object.isRequired,
     liveTable: PropTypes.object.isRequired,
@@ -29,10 +30,12 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   })
 
   render() {
-    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
+    const {index, liveTable, model} = this.p
+    const {modelClass, workplace} = liveTable.p
+    const {actionsContent, destroyEnabled, editModelPath, viewModelPath} = liveTable.props
+    const {columns, currentWorkplace} = liveTable.state
+    const {styleForColumn, styleForRow} = liveTable.tt
+    const even = index % 2 == 0
 
     this.modelCallbackArgs = this._modelCallbackArgs() // 'model' can change so this needs to be re-cached for every render
 
@@ -47,9 +50,12 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     }
 
     return (
-      <Row dataSet={{class: `${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`, modelId: model.id()}}>
+      <Row
+        dataSet={{class: `${inflection.dasherize(modelClass.modelClassData().paramKey)}-row`, modelId: model.id()}}
+        style={styleForRow({even})}
+      >
         {workplace &&
-          <Column dataSet={{class: "workplace-column"}} style={{width: 25}}>
+          <Column dataSet={{class: "workplace-column"}} style={styleForColumn({even, style: {width: 41}})}>
             <WorkerPluginsCheckbox
               currentWorkplace={currentWorkplace}
               model={model}
@@ -57,9 +63,8 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
             />
           </Column>
         }
-        {columns && this.columnsContentFromColumns(model)}
-        {!columns && columnsContent && columnsContent(this.modelCallbackArgs)}
-        <Column dataSet={{class: "actions-column"}} style={{flexDirection: "row"}}>
+        {columns && this.columnsContentFromColumns(model, even)}
+        <Column dataSet={{class: "actions-column"}} style={styleForColumn({even, style: {flexDirection: "row"}, type: "actions"})}>
           {actionsContent && actionsContent(this.modelCallbackArgs)}
           {viewPath &&
             <Link dataSet={{class: "view-button"}} to={viewPath}>
@@ -81,7 +86,7 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     )
   }
 
-  columnClassNamesForColumn (column) {
+  columnClassNamesForColumn(column) {
     const classNames = ["table--column"]
 
     if (column.commonProps && column.commonProps.className) classNames.push(column.commonProps.className)
@@ -90,17 +95,17 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     return classNames
   }
 
-  columnsContentFromColumns (model) {
+  columnsContentFromColumns(model, even) {
     const {isSmallScreen, preparedColumns} = this.p
 
-    return preparedColumns?.map(({column, tableSettingColumn, width}) => columnVisible(column, tableSettingColumn) &&
+    return preparedColumns?.map(({column, tableSettingColumn, width}, columnIndex) => columnVisible(column, tableSettingColumn) &&
       <Column
         dataSet={{
           class: classNames(this.columnClassNamesForColumn(column)),
           identifier: columnIdentifier(column)
         }}
         key={columnIdentifier(column)}
-        style={{width: `${width}%`}}
+        style={this.p.liveTable.styleForColumn({column, columnIndex, even, style: {width: `${width}%`}})}
         {...this.props.liveTable.columnProps(column)}
       >
         {isSmallScreen &&

package/src/table/table.jsx

@@ -55,7 +55,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     className: PropTypes.string,
     collection: PropTypes.instanceOf(Collection),
     columns: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
-    columnsContent: PropTypes.func,
     controls: PropTypes.func,
     currentUser: PropTypes.object,
     defaultDateFormatName: PropTypes.string,
@@ -116,6 +115,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       queryQName: () => `${queryName}_q`,
       queryPageName: () => `${queryName}_page`,
       querySName,
+      resizing: false,
       showFilters: () => Boolean(queryParams[querySName]),
       showSettings: false,
       tableSetting: undefined,
@@ -297,7 +297,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       className,
       collection,
       columns,
-      columnsContent,
       controls,
       currentUser,
       defaultDateFormatName,
@@ -351,12 +350,14 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const flatList = (
       <FlatList
         data={models}
-        dataSet={{class: className}}
+        dataSet={{class: classNames("api-maker--table", className)}}
         extraData={this.s.lastUpdate}
         keyExtractor={this.tt.keyExtrator}
         ListHeaderComponent={this.tt.listHeaderComponent}
         onLayout={this.tt.onFlatListLayout}
         renderItem={this.tt.renderItem}
+        showsHorizontalScrollIndicator
+        style={{border: "1px solid #dbdbdb", borderRadius: 5, overflowX: "auto"}}
         {...restProps}
       />
     )
@@ -453,9 +454,9 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const {query} = digs(this.collection, "query")
 
     return (
-      <Row dataSet={{class: "live-table-header-row"}}>
+      <Row dataSet={{class: "live-table-header-row"}} style={this.styleForRow()}>
         {workplace && currentWorkplace &&
-          <Header style={{width: 25}}>
+          <Header style={this.styleForHeader({style: {width: 41}})}>
             <WorkerPluginsCheckAllCheckbox
               currentWorkplace={currentWorkplace}
               query={query}
@@ -464,18 +465,19 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
           </Header>
         }
         {this.headersContentFromColumns()}
-        <Header />
+        <Header style={this.styleForHeader({style: {}, type: "actions"})} />
       </Row>
     )
   }
 
-  renderItem = ({item: model}) => {
+  renderItem = ({index, item: model}) => {
     const {preparedColumns, tableSettingFullCacheKey} = this.s
 
     return (
       <ModelRow
         cacheKey={model.cacheKey()}
         columnWidths={this.columnWidths()}
+        index={index}
         isSmallScreen={this.tt.isSmallScreen}
         key={model.id()}
         liveTable={this}
@@ -486,6 +488,61 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     )
   }
 
+  styleForColumn({column, columnIndex, even, style, type}) {
+    const defaultStyle = {
+      justifyContent: "center",
+      padding: 8,
+      backgroundColor: even ? "#f5f5f5" : undefined
+    }
+
+    if (type != "actions") {
+      defaultStyle.borderRight = "1px solid #dbdbdb"
+    }
+
+    const actualStyle = Object.assign(
+      defaultStyle,
+      style
+    )
+
+    return actualStyle
+  }
+
+  styleForHeader({column, columnIndex, style, type}) {
+    const defaultStyle = {
+      padding: 8
+    }
+
+    if (type != "actions") {
+      defaultStyle.borderRight = "1px solid #dbdbdb"
+    }
+
+    const actualStyle = Object.assign(
+      defaultStyle,
+      style
+    )
+
+    return actualStyle
+  }
+
+  styleForHeaderText() {
+    const actualStyle = {fontWeight: "bold"}
+
+    return actualStyle
+  }
+
+  styleForRow({even} = {}) {
+    const actualStyle = {
+      flex: 1,
+      alignItems: "stretch"
+    }
+
+    if (even) {
+      actualStyle.backgroundColor = "#f5f5f5"
+    }
+
+    return actualStyle
+  }
+
   tableControls() {
     const {controls} = this.props
     const {showSettings} = this.s
@@ -570,6 +627,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     <HeaderColumn
       column={column}
       key={tableSettingColumn.identifier()}
+      resizing={this.s.resizing}
       table={this}
       tableSettingColumn={tableSettingColumn}
       width={width}