@kaspernj/api-maker 1.0.418 → 1.0.420

package/package.json

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

package/src/collection.mjs

@@ -9,12 +9,12 @@ import Result from "./result.mjs"
 export default class ApiMakerCollection {
   static apiMakerType = "Collection"
 
-  constructor (args, queryArgs = {}) {
+  constructor(args, queryArgs = {}) {
     this.queryArgs = queryArgs
     this.args = args
   }
 
-  abilities (originalAbilities) {
+  abilities(originalAbilities) {
     const newAbilities = {}
 
     for (const originalAbilityName in originalAbilities) {
@@ -33,21 +33,21 @@ export default class ApiMakerCollection {
     return this._merge({abilities: newAbilities})
   }
 
-  accessibleBy (abilityName) {
+  accessibleBy(abilityName) {
     return this._merge({accessibleBy: inflection.underscore(abilityName)})
   }
 
-  async count () {
+  async count() {
     const response = await this.clone()._merge({count: true})._response()
 
     return digg(response, "count")
   }
 
-  distinct () {
+  distinct() {
     return this._merge({distinct: true})
   }
 
-  async each (callback) {
+  async each(callback) {
     const array = await this.toArray()
 
     for (const model in array) {
@@ -55,12 +55,24 @@ export default class ApiMakerCollection {
     }
   }
 
-  async first () {
+  except(...keys) {
+    for (const key of keys) {
+      if (key == "page") {
+        delete this.queryArgs[key]
+      } else {
+        throw new Error(`Unhandled key: ${key}`)
+      }
+    }
+
+    return this
+  }
+
+  async first() {
     const models = await this.toArray()
     return models[0]
   }
 
-  groupBy (...arrayOfTablesAndColumns) {
+  groupBy(...arrayOfTablesAndColumns) {
     const arrayOfTablesAndColumnsWithLowercaseColumns = arrayOfTablesAndColumns.map((tableAndColumn) => {
       if (Array.isArray(tableAndColumn)) {
         return [tableAndColumn[0], tableAndColumn[1].toLowerCase()]
@@ -76,18 +88,18 @@ export default class ApiMakerCollection {
     })
   }
 
-  isLoaded () {
+  isLoaded() {
     if (this.args.reflectionName in this.args.model.relationshipsCache)
       return true
 
     return false
   }
 
-  limit (amount) {
+  limit(amount) {
     return this._merge({limit: amount})
   }
 
-  preloaded () {
+  preloaded() {
     if (!(this.args.reflectionName in this.args.model.relationshipsCache)) {
       throw new Error(`${this.args.reflectionName} hasnt been loaded yet`)
     }
@@ -95,7 +107,7 @@ export default class ApiMakerCollection {
     return this.args.model.relationshipsCache[this.args.reflectionName]
   }
 
-  loaded () {
+  loaded() {
     const {model, reflectionName} = this.args
 
     if (reflectionName in model.relationships) {
@@ -135,22 +147,22 @@ export default class ApiMakerCollection {
   forEach = (...args) => this.loaded().forEach(...args)
   map = (...args) => this.loaded().map(...args)
 
-  preload (preloadValue) {
+  preload(preloadValue) {
     return this._merge({preload: preloadValue})
   }
 
-  page (page) {
+  page(page) {
     if (!page)
       page = 1
 
     return this._merge({page})
   }
 
-  pageKey (pageKey) {
+  pageKey(pageKey) {
     return this._merge({pageKey})
   }
 
-  params () {
+  params() {
     let params = {}
 
     if (this.queryArgs.params) params = incorporate(params, this.queryArgs.params)
@@ -171,20 +183,20 @@ export default class ApiMakerCollection {
     return params
   }
 
-  per (per) {
+  per(per) {
     return this._merge({per})
   }
 
-  perKey (perKey) {
+  perKey(perKey) {
     return this._merge({perKey})
   }
 
-  ransack (params) {
+  ransack(params) {
     if (params) this._merge({ransack: params})
     return this
   }
 
-  async result () {
+  async result() {
     const response = await this._response()
     const models = digg(response, "collection")
 
@@ -242,11 +254,11 @@ export default class ApiMakerCollection {
     return this._merge({selectColumns: newSelect})
   }
 
-  sort (sortBy) {
+  sort(sortBy) {
     return this._merge({ransack: {s: sortBy}})
   }
 
-  async toArray () {
+  async toArray() {
     const response = await this._response()
     const models = digg(response, "collection")
 
@@ -255,13 +267,13 @@ export default class ApiMakerCollection {
     return models
   }
 
-  modelClass () {
+  modelClass() {
     const modelName = digg(this.args.modelClass.modelClassData(), "name")
 
     return modelClassRequire(modelName)
   }
 
-  clone () {
+  clone() {
     const clonedQueryArgs = cloneDeep(this.queryArgs)
 
     return new ApiMakerCollection(this.args, clonedQueryArgs)
@@ -274,13 +286,13 @@ export default class ApiMakerCollection {
     }
   }
 
-  _merge (newQueryArgs) {
+  _merge(newQueryArgs) {
     incorporate(this.queryArgs, newQueryArgs)
 
     return this
   }
 
-  _response () {
+  _response() {
     const modelClassData = this.args.modelClass.modelClassData()
 
     return CommandsPool.addCommand(

package/src/table/header-column.jsx

@@ -42,7 +42,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
     const actualStyle = Object.assign(
       {
         cursor: resizing ? "col-resize" : undefined,
-        width: `${width}%`
+        width
       },
       style
     )

package/src/table/model-column.jsx

@@ -0,0 +1,64 @@
+import {Text, 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 PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseComponent {
+  static propTypes = propTypesExact({
+    column: PropTypes.object.isRequired,
+    columnIndex: PropTypes.number.isRequired,
+    even: PropTypes.bool.isRequired,
+    isSmallScreen: PropTypes.bool.isRequired,
+    model: PropTypes.object.isRequired,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired,
+    width: PropTypes.number.isRequired
+  })
+
+  render() {
+    const {column, columnIndex, even, isSmallScreen, model, table, width} = this.props
+    const columnProps = table.columnProps(column)
+    const {style, ...restColumnProps} = columnProps
+    const actualStyle = Object.assign(
+      table.styleForColumn({column, columnIndex, even, style: {width}}),
+      style
+    )
+
+    return (
+      <Column
+        dataSet={{
+          class: classNames(this.columnClassNamesForColumn(column)),
+          identifier: columnIdentifier(column)
+        }}
+        style={actualStyle}
+        {...restColumnProps}
+      >
+        {isSmallScreen &&
+          <View dataSet={{class: "table--column-label"}}>
+            <Text>
+              {table.headerLabelForColumn(column)}
+            </Text>
+          </View>
+        }
+        <View dataSet={{class: "table--column-value"}}>
+          {new ColumnContent({column, model, table}).content()}
+        </View>
+      </Column>
+    )
+  }
+
+  columnClassNamesForColumn(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)
+
+    return classNames
+  }
+}))

package/src/table/model-row.jsx

@@ -1,14 +1,13 @@
-import {Pressable, Text, View} from "react-native"
+import {Pressable} 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 columnVisible from "./column-visible.mjs"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import * as inflection from "inflection"
 import modelCallbackArgs from "./model-callback-args.mjs"
 import Link from "../link"
+import ModelColumn from "./model-column"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import Row from "./components/row"
@@ -17,60 +16,6 @@ import {shapeComponent} from "set-state-compare/src/shape-component"
 
 const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox"))
 
-const ModelColumn = memo(shapeComponent(class ApiMakerTableModelColumn extends BaseComponent {
-  static propTypes = propTypesExact({
-    column: PropTypes.object.isRequired,
-    columnIndex: PropTypes.number.isRequired,
-    even: PropTypes.bool.isRequired,
-    isSmallScreen: PropTypes.bool.isRequired,
-    model: PropTypes.object.isRequired,
-    table: PropTypes.object.isRequired,
-    tableSettingColumn: PropTypes.object.isRequired,
-    width: PropTypes.number.isRequired
-  })
-
-  render() {
-    const {column, columnIndex, even, isSmallScreen, model, table, width} = this.props
-    const columnProps = table.columnProps(column)
-    const {style, ...restColumnProps} = columnProps
-    const actualStyle = Object.assign(
-      table.styleForColumn({column, columnIndex, even, style: {width: `${width}%`}}),
-      style
-    )
-
-    return (
-      <Column
-        dataSet={{
-          class: classNames(this.columnClassNamesForColumn(column)),
-          identifier: columnIdentifier(column)
-        }}
-        style={actualStyle}
-        {...restColumnProps}
-      >
-        {isSmallScreen &&
-          <View dataSet={{class: "table--column-label"}}>
-            <Text>
-              {table.headerLabelForColumn(column)}
-            </Text>
-          </View>
-        }
-        <View dataSet={{class: "table--column-value"}}>
-          {new ColumnContent({column, model, table}).content()}
-        </View>
-      </Column>
-    )
-  }
-
-  columnClassNamesForColumn(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)
-
-    return classNames
-  }
-}))
-
 export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow extends BaseComponent {
   static propTypes = propTypesExact({
     cacheKey: PropTypes.string.isRequired,

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

@@ -4,7 +4,7 @@ import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {memo, useEffect, useRef} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
-import {View} from "react-native"
+import {Text, View} from "react-native"
 
 export default memo(shapeComponent(class ColumnRow extends BaseComponent {
   static propTypes = propTypesExact({
@@ -43,7 +43,9 @@ export default memo(shapeComponent(class ColumnRow extends BaseComponent {
             type="checkbox"
             {...checkboxProps}
           />
-          {table.headerLabelForColumn(column)}
+          <Text>
+            {table.headerLabelForColumn(column)}
+          </Text>
         </label>
       </View>
     )

package/src/table/table.jsx

@@ -1,5 +1,5 @@
 import {digg, digs} from "diggerize"
-import {Pressable, Text, View} from "react-native"
+import {Pressable, StyleSheet, Text, View} from "react-native"
 import BaseComponent from "../base-component"
 import Card from "../bootstrap/card"
 import classNames from "classnames"
@@ -34,6 +34,13 @@ import Widths from "./widths"
 
 const paginationOptions = [30, 60, 90, ["All", "all"]]
 const WorkerPluginsCheckAllCheckbox = React.lazy(() => import("./worker-plugins-check-all-checkbox"))
+const styleSheet = StyleSheet.create({
+  flatList: {
+    border: "1px solid #dbdbdb",
+    borderRadius: 5,
+    overflowX: "auto"
+  }
+})
 
 export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   static defaultProps = {
@@ -87,6 +94,8 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     workplace: PropTypes.bool.isRequired
   }
 
+  tableSetting = null
+
   setup() {
     const {t} = useI18n({namespace: "js.api_maker.table"})
     const {breakpoint} = useBreakpoint()
@@ -111,7 +120,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       columns: columnsAsArray,
       currentWorkplace: undefined,
       currentWorkplaceCount: null,
-      flatListWidth: undefined,
       identifier: () => this.props.identifier || `${collectionKey}-default`,
       lastUpdate: () => new Date(),
       preload: undefined,
@@ -124,13 +132,13 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       showFilters: () => Boolean(queryParams[querySName]),
       showSettings: false,
       tableSetting: undefined,
+      tableSettingLoaded: false,
       tableSettingFullCacheKey: undefined,
+      width: undefined,
       widths: null
     })
 
     useMemo(() => {
-      this.loadTableSetting()
-
       if (this.props.workplace) {
         this.loadCurrentWorkplace().then(() => {
           this.loadCurrentWorkplaceCount()
@@ -138,6 +146,12 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       }
     }, [this.p.currentUser?.id()])
 
+    useMemo(() => {
+      if (!this.tt.tableSetting && this.s.width) {
+        this.loadTableSetting()
+      }
+    }, [this.p.currentUser?.id(), this.s.width])
+
     useModelEvent(this.s.currentWorkplace, "workplace_links_created", this.tt.onLinksCreated)
     useModelEvent(this.s.currentWorkplace, "workplace_links_destroyed", this.tt.onLinksDestroyed)
 
@@ -169,6 +183,10 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       select,
       selectColumns: this.props.selectColumns
     })
+    this.queryWithoutPagination = useMemo(
+      () => this.collection?.query?.clone()?.except("page"),
+      [this.collection.query]
+    )
   }
 
   async loadCurrentWorkplace() {
@@ -196,13 +214,14 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
     const tableSetting = await this.tableSettings.loadExistingOrCreateTableSettings()
     const {columns, preload} = this.tableSettings.preparedColumns(tableSetting)
-    const {flatListWidth} = this.s
-    const widths = new Widths({columns, flatListWidth, table: this})
+    const {width} = this.s
+    const widths = new Widths({columns, table: this, width})
 
     this.setState({
       preparedColumns: columns,
       preload: this.mergedPreloads(preload),
       tableSetting,
+      tableSettingLoaded: true,
       tableSettingFullCacheKey: tableSetting.fullCacheKey(),
       widths
     })
@@ -259,7 +278,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }
 
     return (
-      <div className={this.className()} style={this.props.styles?.container}>
+      <View dataSet={{class: this.className()}} onLayout={this.tt.onContainerLayout} style={this.props.styles?.container}>
         {showNoRecordsAvailableContent &&
           <div className="live-table--no-records-available-content">
             {noRecordsAvailableContent({models, qParams, overallCount})}
@@ -276,7 +295,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         {qParams && query && result && models && !showNoRecordsAvailableContent && !showNoRecordsFoundContent &&
           this.cardOrTable()
         }
-      </div>
+      </View>
     )
   }
 
@@ -376,10 +395,9 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         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"}}
+        style={styleSheet.flatList}
         {...restProps}
       />
     )
@@ -416,12 +434,12 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     )
   }
 
-  onFlatListLayout = (e) => {
+  onContainerLayout = (e) => {
     const {width} = e.nativeEvent.layout
     const {widths} = this.s
 
-    this.setState({flatListWidth: width})
-    widths.flatListWidth = width
+    this.setState({width})
+    if (widths) widths.tableWidth = width
   }
 
   onLinksCreated = ({args}) => {
@@ -495,7 +513,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   }
 
   listHeaderComponent = () => {
-    const {query} = digs(this.collection, "query")
+    const {queryWithoutPagination} = this.tt
 
     return (
       <Row dataSet={{class: "live-table-header-row"}} style={this.styleForRow()}>
@@ -503,7 +521,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
           <Header style={this.styleForHeader({style: {width: 41}})}>
             <WorkerPluginsCheckAllCheckbox
               currentWorkplace={this.s.currentWorkplace}
-              query={query}
+              query={queryWithoutPagination}
               style={{marginHorizontal: "auto"}}
             />
           </Header>
@@ -517,6 +535,16 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   renderItem = ({index, item: model}) => {
     const {preparedColumns, tableSettingFullCacheKey} = this.s
 
+    if (!this.s.tableSettingLoaded) {
+      return (
+        <View>
+          <Text>
+            Loading...
+          </Text>
+        </View>
+      )
+    }
+
     return (
       <ModelRow
         cacheKey={model.cacheKey()}
@@ -536,7 +564,8 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const defaultStyle = {
       justifyContent: "center",
       padding: 8,
-      backgroundColor: even ? "#f5f5f5" : undefined
+      backgroundColor: even ? "#f5f5f5" : undefined,
+      overflow: "hidden"
     }
 
     if (type == "actions") {

package/src/table/widths.mjs

@@ -1,28 +1,28 @@
 import {digg} from "diggerize"
 
 export default class TableWidths {
-  constructor({columns, flatListWidth, table}) {
+  constructor({columns, table, width}) {
     this.columns = columns
-    this.flatListWidth = flatListWidth
+    this.tableWidth = width
     this.table = table
     this.setWidths()
   }
 
   setWidths() {
-    let widthLeft = 100.0
-
     this.columnsWidths = {}
 
+    let widthLeft = this.tableWidth
     const updateData = []
 
     // Set widths that are defined
     for (const columnIndex in this.columns) {
-      const column = this.columns[columnIndex].tableSettingColumn
+      const column = this.columns[columnIndex]
+      const tableSettingColumn = column.tableSettingColumn
 
-      if (column.hasWidth()) {
-        this.columns[columnIndex].width = column.width()
+      if (tableSettingColumn.hasWidth()) {
+        column.width = tableSettingColumn.width()
 
-        widthLeft -= column.width()
+        widthLeft -= tableSettingColumn.width()
       }
     }
 
@@ -36,21 +36,26 @@ export default class TableWidths {
 
     // Set widths of columns without
     for (const columnIndex in this.columns) {
-      const column = this.columns[columnIndex].tableSettingColumn
+      const column = this.columns[columnIndex]
+      const tableSettingColumn = column.tableSettingColumn
+
+      if (!tableSettingColumn.hasWidth()) {
+        let newWidth = widthLeft / amountOfColumns
 
-      if (!column.hasWidth()) {
-        const newWidth = widthLeft / amountOfColumns
+        if (newWidth < 200) newWidth = 200
 
-        this.columns[columnIndex].width = newWidth
+        column.width = newWidth
 
         updateData << {
-          id: column.id(),
+          id: tableSettingColumn.id(),
           width: newWidth
         }
       }
     }
 
-    // FIXME: Should update the columns on the backend if anything changed
+    if (updateData.length > 0) {
+      // FIXME: Should update the columns on the backend if anything changed
+    }
   }
 
   getWidthOfColumn(identifier) {
@@ -66,12 +71,8 @@ export default class TableWidths {
 
     if (!column) throw new Error(`No such column: ${identifier}`)
 
-    const widthPercent = (width / this.flatListWidth) * 100
-
-    column.width = widthPercent
+    column.width = width
 
     this.table.setState({lastUpdate: new Date()})
-
-    // FIXME: Should reduce / enlarge sibling columns to keep a 100% fit
   }
 }

package/src/table/worker-plugins-check-all-checkbox.jsx

@@ -1,39 +1,47 @@
+import {memo, useEffect, useMemo, useRef} from "react"
+import BaseComponent from "../base-component"
 import classNames from "classnames"
 import Collection from "../collection.mjs"
-import EventConnection from "../event-connection"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
 import {simpleObjectDifferent} from "set-state-compare/src/diff-utils"
-import {useEffect, useRef} from "react"
+import useModelEvent from "../use-model-event.js"
 
-const Checkbox = (props) => {
-  const {indeterminate, ...restProps} = props
-  const checkboxRef = useRef()
+const Checkbox = memo(shapeComponent(class Checkbox extends BaseComponent {
+  render() {
+    const {indeterminate, ...restProps} = this.props
+    const checkboxRef = useRef()
 
-  useEffect(() => {
-    checkboxRef.current.indeterminate = indeterminate
-  })
+    useEffect(() => {
+      checkboxRef.current.indeterminate = indeterminate
+    })
 
-  return (
-    <input ref={checkboxRef} type="checkbox" {...restProps} />
-  )
-}
+    return (
+      <input ref={checkboxRef} type="checkbox" {...restProps} />
+    )
+  }
+}))
 
-export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends React.PureComponent {
+export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckAllCheckbox extends BaseComponent {
   static propTypes = propTypesExact({
     currentWorkplace: PropTypes.object,
     query: PropTypes.instanceOf(Collection),
     style: PropTypes.object
   })
 
-  state = {
-    checked: false,
-    indeterminate: false
-  }
+  setup() {
+    this.useStates({
+      checked: false,
+      indeterminate: false
+    })
+
+    useMemo(() => {
+      this.updateAllChecked()
+    }, [])
 
-  componentDidMount() {
-    this.updateAllChecked()
+    useModelEvent(this.props.currentWorkplace, "workplace_links_created", this.tt.onLinksCreated)
+    useModelEvent(this.props.currentWorkplace, "workplace_links_destroyed", this.tt.onLinksDestroyed)
   }
 
   componentDidUpdate(prevProps) {
@@ -58,21 +66,17 @@ export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends React.Pu
   }
 
   render() {
-    const {className, currentWorkplace, style} = this.props
+    const {className, style} = this.props
     const {checked, indeterminate} = this.state
 
     return (
-      <>
-        <EventConnection event="workplace_links_created" model={currentWorkplace} onCall={this.onLinksCreated} />
-        <EventConnection event="workplace_links_destroyed" model={currentWorkplace} onCall={this.onLinksDestroyed} />
-        <Checkbox
-          checked={checked}
-          className={classNames("api-maker--table--worker-plugins-check-all-checkbox", className)}
-          indeterminate={indeterminate}
-          onChange={this.onCheckedChanged}
-          style={style}
-        />
-      </>
+      <Checkbox
+        checked={checked}
+        className={classNames("api-maker--table--worker-plugins-check-all-checkbox", className)}
+        indeterminate={indeterminate}
+        onChange={this.onCheckedChanged}
+        style={style}
+      />
     )
   }
 
@@ -104,4 +108,4 @@ export default class ApiMakerTableWorkerPluginsCheckAllCheckbox extends React.Pu
       this.updateAllChecked()
     }
   }
-}
+}))

package/src/table/worker-plugins-checkbox.jsx

@@ -1,7 +1,6 @@
 import BaseComponent from "../base-component"
 import classNames from "classnames"
 import {digg} from "diggerize"
-import EventConnection from "../event-connection"
 import modelClassRequire from "../model-class-require.mjs"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"