@kaspernj/api-maker 1.0.408 → 1.0.409

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.408",
+  "version": "1.0.409",
   "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

@@ -34,6 +34,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
   render() {
     const {column, table, tableSettingColumn, width} = this.p
     const {defaultParams} = table.props
+    const {styleForHeader, styleForHeaderText} = table.tt
     const {query} = digs(table.collection, "query")
 
     return (
@@ -43,7 +44,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
           identifier: tableSettingColumn.identifier()
         }}
         onLayout={this.tt.onLayout}
-        style={{width: `${width}%`}}
+        style={styleForHeader({style: {width: `${width}%`}})}
         {...table.columnProps(column)}
       >
         <View style={{display: "flex", flexDirection: "row", alignItems: "center"}}>
@@ -53,6 +54,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)}
             />
           }

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"}})}>
           {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,
@@ -297,7 +296,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       className,
       collection,
       columns,
-      columnsContent,
       controls,
       currentUser,
       defaultDateFormatName,
@@ -351,12 +349,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={{overflowX: "auto"}}
         {...restProps}
       />
     )
@@ -453,9 +453,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 +464,19 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
           </Header>
         }
         {this.headersContentFromColumns()}
-        <Header />
+        <Header style={this.styleForHeader({style: {}})} />
       </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 +487,49 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     )
   }
 
+  styleForColumn({column, columnIndex, even, style}) {
+    const actualStyle = Object.assign(
+      {
+        padding: 8,
+        backgroundColor: even ? "#f5f5f5" : undefined,
+      },
+      style
+    )
+
+    return actualStyle
+  }
+
+  styleForHeader({column, columnIndex, style}) {
+    const actualStyle = Object.assign(
+      {
+        padding: 8
+      },
+      style
+    )
+
+    return actualStyle
+  }
+
+  styleForHeaderText() {
+    const actualStyle = {fontWeight: "bold"}
+
+    return actualStyle
+  }
+
+  styleForRow({even} = {}) {
+    const actualStyle = {
+      flex: 1,
+      alignItems: "center",
+      borderBottom: "1px solid #f2f2f2"
+    }
+
+    if (even) {
+      actualStyle.backgroundColor = "#f5f5f5"
+    }
+
+    return actualStyle
+  }
+
   tableControls() {
     const {controls} = this.props
     const {showSettings} = this.s