@kaspernj/api-maker 1.0.409 → 1.0.410

package/package.json

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

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,7 +33,7 @@ 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")
@@ -44,7 +45,10 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
           identifier: tableSettingColumn.identifier()
         }}
         onLayout={this.tt.onLayout}
-        style={styleForHeader({style: {width: `${width}%`}})}
+        style={styleForHeader({style: {
+          cursor: resizing ? "col-resize" : undefined,
+          width: `${width}%`
+        }})}
         {...table.columnProps(column)}
       >
         <View style={{display: "flex", flexDirection: "row", alignItems: "center"}}>
@@ -63,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>
     )
   }
@@ -81,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()
@@ -99,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

@@ -64,7 +64,7 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
           </Column>
         }
         {columns && this.columnsContentFromColumns(model, even)}
-        <Column dataSet={{class: "actions-column"}} style={styleForColumn({even, style: {flexDirection: "row"}})}>
+        <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}>

package/src/table/table.jsx

@@ -115,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,
@@ -356,7 +357,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         onLayout={this.tt.onFlatListLayout}
         renderItem={this.tt.renderItem}
         showsHorizontalScrollIndicator
-        style={{overflowX: "auto"}}
+        style={{border: "1px solid #dbdbdb", borderRadius: 5, overflowX: "auto"}}
         {...restProps}
       />
     )
@@ -464,7 +465,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
           </Header>
         }
         {this.headersContentFromColumns()}
-        <Header style={this.styleForHeader({style: {}})} />
+        <Header style={this.styleForHeader({style: {}, type: "actions"})} />
       </Row>
     )
   }
@@ -487,23 +488,36 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     )
   }
 
-  styleForColumn({column, columnIndex, even, style}) {
+  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(
-      {
-        padding: 8,
-        backgroundColor: even ? "#f5f5f5" : undefined,
-      },
+      defaultStyle,
       style
     )
 
     return actualStyle
   }
 
-  styleForHeader({column, columnIndex, style}) {
+  styleForHeader({column, columnIndex, style, type}) {
+    const defaultStyle = {
+      padding: 8
+    }
+
+    if (type != "actions") {
+      defaultStyle.borderRight = "1px solid #dbdbdb"
+    }
+
     const actualStyle = Object.assign(
-      {
-        padding: 8
-      },
+      defaultStyle,
       style
     )
 
@@ -519,8 +533,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   styleForRow({even} = {}) {
     const actualStyle = {
       flex: 1,
-      alignItems: "center",
-      borderBottom: "1px solid #f2f2f2"
+      alignItems: "stretch"
     }
 
     if (even) {
@@ -614,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}