@kaspernj/api-maker 1.0.445 → 1.0.447

package/src/table/header-column.jsx

@@ -1,23 +1,27 @@
+import {useMemo} from "react"
 import BaseComponent from "../base-component"
 import classNames from "classnames"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import Header from "./components/header"
 import HeaderColumnContent from "./header-column-content"
 import memo from "set-state-compare/src/memo"
-import {Platform, Pressable} from "react-native"
+import {Animated, PanResponder} from "react-native"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import useBreakpoint from "../use-breakpoint"
-import useEventListener from "../use-event-listener.mjs"
 import Widths from "./widths"
 
 export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseComponent {
   static propTypes = propTypesExact({
+    active: PropTypes.bool.isRequired,
+    animatedWidth: PropTypes.instanceOf(Animated.Value).isRequired,
+    animatedZIndex: PropTypes.instanceOf(Animated.Value).isRequired,
     column: PropTypes.object.isRequired,
     resizing: PropTypes.bool.isRequired,
     table: PropTypes.object.isRequired,
     tableSettingColumn: PropTypes.object.isRequired,
-    width: PropTypes.number.isRequired,
+    touchProps: PropTypes.object.isRequired,
     widths: PropTypes.instanceOf(Widths).isRequired
   })
 
@@ -25,29 +29,64 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
     const {name: breakpoint, mdUp, smDown} = useBreakpoint()
 
     this.setInstance({breakpoint, mdUp, smDown})
-
-    useEventListener(window, "mousemove", this.tt.onWindowMouseMove)
-    useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
-
     this.useStates({
-      cursorX: undefined,
-      originalWidth: undefined,
       resizing: false
     })
+
+    this.resizePanResponder = useMemo(
+      () => PanResponder.create({
+        onStartShouldSetPanResponder: (_e) => {
+          this.originalWidth = this.currentWidth
+          this.setState({resizing: true})
+          this.p.table.setState({resizing: true})
+
+          return true
+        },
+        onPanResponderMove: (_e, gestate) => {
+          const newWidth = this.tt.originalWidth + gestate.dx
+
+          this.p.widths.setWidthOfColumn({
+            identifier: this.p.tableSettingColumn.identifier(),
+            width: newWidth
+          })
+        },
+        onPanResponderRelease: this.tt.onResizeEnd,
+        onPanResponderTerminate: this.tt.onResizeEnd,
+        onPanResponderTerminationRequest: () => false // Don't let another PanResponder steal focus and stop resizing until release
+      }),
+      []
+    )
+  }
+
+  onResizeEnd = async () => {
+    this.p.table.setState({lastUpdate: new Date(), resizing: false})
+    this.setState({resizing: false})
+
+    const width = this.p.widths.getWidthOfColumn(this.p.tableSettingColumn.identifier())
+
+    await this.p.tableSettingColumn.update({width})
   }
 
   render() {
     const {mdUp} = this.tt
-    const {column, resizing, table, tableSettingColumn, width} = this.p
+    const {active, animatedWidth, column, resizing, table, tableSettingColumn, touchProps} = this.p
     const {styleForHeader} = table.tt
     const headerProps = table.headerProps(column)
     const {style, ...restColumnProps} = headerProps
-    const actualStyle = Object.assign(
-      {
-        cursor: resizing ? "col-resize" : undefined,
-        width: mdUp ? width : "100%"
+    const actualStyle = useMemo(
+      () => {
+        const actualStyle = Object.assign(
+          {
+            cursor: resizing ? "col-resize" : undefined,
+            width: mdUp ? animatedWidth : "100%",
+            height: mdUp ? "100%" : undefined
+          },
+          style
+        )
+
+        return actualStyle
       },
-      style
+      [active, animatedWidth, mdUp, resizing, style]
     )
 
     return (
@@ -60,11 +99,12 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
         style={styleForHeader({style: actualStyle})}
         {...restColumnProps}
       >
+        {mdUp &&
+          <FontAwesomeIcon name="bars" style={{marginRight: 3, fontSize: 12}} {...touchProps} />
+        }
         <HeaderColumnContent column={column} table={table} tableSettingColumn={tableSettingColumn} />
         {mdUp &&
-          <Pressable
-            onMouseDown={Platform.OS == "web" ? this.tt.onResizeMouseDown : undefined}
-            onPressIn={this.tt.onResizePressIn}
+          <Animated.View
             style={{
               position: "absolute",
               top: 0,
@@ -74,6 +114,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
               cursor: "col-resize",
               zIndex: 9999
             }}
+            {...this.tt.resizePanResponder.panHandlers}
           />
         }
       </Header>
@@ -85,65 +126,4 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
 
     this.currentWidth = width
   }
-
-  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()
-
-    const originalWidth = this.currentWidth
-    const cursorX = e.nativeEvent.pageX
-
-    this.setState({
-      cursorX,
-      originalWidth,
-      resizing: true
-    })
-    this.p.table.setState({resizing: true})
-  }
-
-  onWindowMouseMove = (e) => {
-    const {cursorX, resizing, originalWidth} = this.s
-
-    if (resizing) {
-      const newCursorX = e.pageX
-      const diffX = newCursorX - cursorX
-      const newWidth = originalWidth + diffX
-
-      this.p.widths.setWidthOfColumn({
-        identifier: this.p.tableSettingColumn.identifier(),
-        width: newWidth
-      })
-    }
-  }
-
-  onWindowMouseUp = () => {
-    if (this.s.resizing) {
-      this.onResizeEnd()
-    }
-  }
 }))

package/src/table/header-select.jsx

@@ -8,7 +8,7 @@ import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../utils/text"
-import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+import useI18n from "i18n-on-steroids/src/use-i18n"
 import useSorting from "./use-sorting"
 
 export default memo(shapeComponent(class ApiMakerTableHeaderSelect extends BaseComponent {

package/src/table/model-column.jsx

@@ -1,9 +1,10 @@
-import {View} from "react-native"
+import {Animated, View} from "react-native"
 import BaseComponent from "../base-component"
 import classNames from "classnames"
 import Column from "./components/column"
 import ColumnContent from "./column-content"
-import columnIdentifier from "./column-identifier.mjs"
+import columnIdentifier from "./column-identifier"
+import EventEmitter from "events"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import memo from "set-state-compare/src/memo"
@@ -13,18 +14,21 @@ import useBreakpoint from "../use-breakpoint"
 
 export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseComponent {
   static propTypes = propTypesExact({
+    animatedPosition: PropTypes.instanceOf(Animated.ValueXY).isRequired,
+    animatedWidth: PropTypes.instanceOf(Animated.Value).isRequired,
+    animatedZIndex: PropTypes.instanceOf(Animated.Value).isRequired,
     column: PropTypes.object.isRequired,
     columnIndex: PropTypes.number.isRequired,
     even: PropTypes.bool.isRequired,
+    events: PropTypes.instanceOf(EventEmitter).isRequired,
     model: PropTypes.object.isRequired,
     table: PropTypes.object.isRequired,
-    tableSettingColumn: PropTypes.object.isRequired,
-    width: PropTypes.number.isRequired
+    tableSettingColumn: PropTypes.object.isRequired
   })
 
   render() {
     const {mdUp} = useBreakpoint()
-    const {column, columnIndex, even, model, table, width} = this.props
+    const {animatedWidth, animatedZIndex, column, columnIndex, even, model, table} = this.props
     const columnProps = table.columnProps(column)
     const {style, ...restColumnProps} = columnProps
     const actualStyle = Object.assign(
@@ -33,7 +37,9 @@ export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseCo
         columnIndex,
         even,
         style: {
-          width: mdUp ? width : "100%"
+          zIndex: animatedZIndex,
+          transform: this.p.animatedPosition.getTranslateTransform(),
+          width: mdUp ? animatedWidth : "100%"
         }
       }),
       style

package/src/table/model-row.jsx

@@ -1,11 +1,11 @@
 import {Pressable} from "react-native"
 import BaseComponent from "../base-component"
 import Column from "./components/column"
-import columnIdentifier from "./column-identifier.mjs"
-import columnVisible from "./column-visible.mjs"
+import columnIdentifier from "./column-identifier"
+import EventEmitter from "events"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import * as inflection from "inflection"
-import modelCallbackArgs from "./model-callback-args.mjs"
+import modelCallbackArgs from "./model-callback-args"
 import Link from "../link"
 import ModelColumn from "./model-column"
 import PropTypes from "prop-types"
@@ -19,11 +19,12 @@ const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox
 export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends BaseComponent {
   static propTypes = propTypesExact({
     cacheKey: PropTypes.string.isRequired,
+    columns: PropTypes.array,
     columnWidths: PropTypes.object.isRequired,
+    events: PropTypes.instanceOf(EventEmitter).isRequired,
     index: PropTypes.number.isRequired,
     model: PropTypes.object.isRequired,
     table: PropTypes.object.isRequired,
-    preparedColumns: PropTypes.array,
     tableSettingFullCacheKey: PropTypes.string.isRequired
   })
 
@@ -85,18 +86,21 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   }
 
   columnsContentFromColumns(model, even) {
-    const {table, preparedColumns} = this.p
+    const {columns, events, table} = this.p
 
-    return preparedColumns?.map(({column, tableSettingColumn, width}, columnIndex) => columnVisible(column, tableSettingColumn) &&
+    return columns?.map(({animatedPosition, animatedWidth, animatedZIndex, column, tableSettingColumn}, columnIndex) =>
       <ModelColumn
+        animatedPosition={animatedPosition}
+        animatedWidth={animatedWidth}
+        animatedZIndex={animatedZIndex}
         column={column}
         columnIndex={columnIndex}
         even={even}
+        events={events}
         key={columnIdentifier(column)}
         model={model}
         table={table}
         tableSettingColumn={tableSettingColumn}
-        width={width}
       />
     )
   }

package/src/table/{select-calculator.mjs → select-calculator.js}

@@ -1,6 +1,6 @@
 import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
-import modelClassRequire from "../model-class-require.mjs"
+import modelClassRequire from "../model-class-require"
 
 class SelectCalculator {
   constructor({table}) {

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

@@ -1,10 +1,10 @@
 import BaseComponent from "../../base-component"
-import columnIdentifier from "../column-identifier.mjs"
+import columnIdentifier from "../column-identifier"
 import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {useEffect, useRef} from "react"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../../utils/text"
 import {View} from "react-native"
 
@@ -87,6 +87,7 @@ export default memo(shapeComponent(class ColumnRow extends BaseComponent {
     const {table, tableSettingColumn} = this.p
 
     await tableSettingColumn.update({visible: this.checked})
-    table.updateSettingsFullCacheKey()
+
+    table.events.emit("columnVisibilityUpdated", {tableSettingColumn})
   }
 }))

package/src/table/settings/download-action.jsx

@@ -1,14 +1,14 @@
 import BaseComponent from "../../base-component"
 import ColumnContent from "../column-content"
-import columnIdentifier from "../column-identifier.mjs"
-import columnVisible from "../column-visible.mjs"
+import columnIdentifier from "../column-identifier"
+import columnVisible from "../column-visible"
 import {saveAs} from "file-saver"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {renderToString} from "react-dom/server"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 import {Pressable} from "react-native"
 import Text from "../../utils/text"
 

package/src/table/settings/index.jsx

@@ -1,5 +1,5 @@
 import BaseComponent from "../../base-component"
-import columnIdentifier from "../column-identifier.mjs"
+import columnIdentifier from "../column-identifier"
 import ColumnRow from "./column-row"
 import DownloadAction from "./download-action"
 import {useRef} from "react"
@@ -7,10 +7,10 @@ import memo from "set-state-compare/src/memo"
 import Modal from "../../modal"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 import {View} from "react-native"
 import Text from "../../utils/text"
-import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
+import useI18n from "i18n-on-steroids/src/use-i18n"
 
 export default memo(shapeComponent(class ApiMakerTableSettings extends BaseComponent {
   static propTypes = propTypesExact({

package/src/table/table-settings.js

@@ -1,14 +1,15 @@
-import columnIdentifier from "./column-identifier.mjs"
-import columnVisible from "./column-visible.mjs"
+import columnIdentifier from "./column-identifier"
+import columnVisible from "./column-visible"
 import {digg} from "diggerize"
 import * as inflection from "inflection"
-import Logger from "../logger.mjs"
+import Logger from "../logger"
 import {ReadersWriterLock} from "epic-locks"
 import {serialize as objectToFormData} from "object-to-formdata"
-import {TableSetting} from "../models.mjs.erb"
+import models from "../models"
 import {v4 as uuidv4} from "uuid"
 
 const logger = new Logger({name: "ApiMaker / TableSettings"})
+const {TableSetting} = models
 
 // Have a lock for each unique table identifier
 const tableSettingsLocks = {}