@kaspernj/api-maker 1.0.433 → 1.0.435

package/src/table/table.jsx

@@ -11,13 +11,15 @@ import FlatList from "./components/flat-list"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import Header from "./components/header"
 import HeaderColumn from "./header-column"
+import HeaderSelect from "./header-select"
 import * as inflection from "inflection"
+import memo from "set-state-compare/src/memo"
 import modelClassRequire from "../model-class-require.mjs"
 import ModelRow from "./model-row"
 import Paginate from "../bootstrap/paginate"
 import Params from "../params"
 import PropTypes from "prop-types"
-import React, {memo, useMemo, useRef} from "react"
+import React, {createContext, useContext, useMemo, useRef} from "react"
 import Row from "./components/row"
 import selectCalculator from "./select-calculator"
 import Select from "../inputs/select"
@@ -42,6 +44,45 @@ const styleSheet = StyleSheet.create({
     overflowX: "auto"
   }
 })
+const TableContext = createContext()
+
+const ListHeaderComponent = memo(() => {
+  const {mdUp} = useBreakpoint()
+  const tableContextValue = useContext(TableContext)
+  const table = tableContextValue.table
+  const {collection, queryWithoutPagination, t} = table.tt
+  const {query} = digs(collection, "query")
+
+  return (
+    <Row dataSet={{class: "api-maker/table/header-row"}} style={table.styleForRowHeader()}>
+      {table.p.workplace && table.s.currentWorkplace &&
+        <Header style={table.styleForHeader({style: {width: mdUp ? 41 : undefined}})}>
+          <WorkerPluginsCheckAllCheckbox
+            currentWorkplace={table.s.currentWorkplace}
+            query={queryWithoutPagination}
+            style={{marginHorizontal: "auto"}}
+          />
+          {!mdUp &&
+            <Text style={{marginLeft: 3}}>
+              {t(".select_all_found", {defaultValue: "Select all found"})}
+            </Text>
+          }
+        </Header>
+      }
+      {!mdUp &&
+        <Header style={table.styleForHeader({style: {}})}>
+          <HeaderSelect preparedColumns={table.s.preparedColumns} query={query} table={table} />
+        </Header>
+      }
+      {mdUp &&
+        <>
+          {table.headersContentFromColumns()}
+          <Header style={table.styleForHeader({style: {}, type: "actions"})} />
+        </>
+      }
+    </Row>
+  )
+})
 
 export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   static defaultProps = {
@@ -99,13 +140,13 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
   setup() {
     const {t} = useI18n({namespace: "js.api_maker.table"})
-    const {name: breakpoint} = useBreakpoint()
+    const {name: breakpoint, mdUp} = useBreakpoint()
     const queryParams = useQueryParams()
 
     this.setInstance({
       breakpoint,
       filterFormRef: useRef(),
-      isSmallScreen: breakpoint == "xs" || breakpoint == "sm",
+      mdUp,
       t
     })
 
@@ -139,6 +180,8 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       widths: null
     })
 
+    this.tableContextValue = useMemo(() => ({cacheKey: this.s.tableSettingFullCacheKey, table: this}), [this.s.tableSettingFullCacheKey])
+
     useMemo(() => {
       if (this.props.workplace) {
         this.loadCurrentWorkplace().then(() => {
@@ -390,17 +433,19 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }
 
     const flatList = (
-      <FlatList
-        data={models}
-        dataSet={{class: classNames("api-maker--table", className)}}
-        extraData={this.s.lastUpdate}
-        keyExtractor={this.tt.keyExtrator}
-        ListHeaderComponent={this.tt.listHeaderComponent}
-        renderItem={this.tt.renderItem}
-        showsHorizontalScrollIndicator
-        style={styleSheet.flatList}
-        {...restProps}
-      />
+      <TableContext.Provider value={this.tt.tableContextValue}>
+        <FlatList
+          data={models}
+          dataSet={{class: classNames("api-maker--table", className), cacheKey: this.s.tableSettingFullCacheKey}}
+          extraData={this.s.lastUpdate}
+          keyExtractor={this.tt.keyExtrator}
+          ListHeaderComponent={ListHeaderComponent}
+          renderItem={this.tt.renderItem}
+          showsHorizontalScrollIndicator
+          style={styleSheet.flatList}
+          {...restProps}
+        />
+      </TableContext.Provider>
     )
 
     return (
@@ -467,7 +512,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }
   }
 
-  keyExtrator = (model) => model.id()
+  keyExtrator = (model) => `${this.s.tableSettingFullCacheKey}-${model.id()}`
 
   filterForm = () => {
     const {filterFormRef, submitFilter, submitFilterDebounce} = this.tt
@@ -513,26 +558,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     Params.changeParams(paramsChange)
   }
 
-  listHeaderComponent = () => {
-    const {queryWithoutPagination} = this.tt
-
-    return (
-      <Row dataSet={{class: "live-table-header-row"}} style={this.styleForRow()}>
-        {this.p.workplace && this.s.currentWorkplace &&
-          <Header style={this.styleForHeader({style: {width: 41}})}>
-            <WorkerPluginsCheckAllCheckbox
-              currentWorkplace={this.s.currentWorkplace}
-              query={queryWithoutPagination}
-              style={{marginHorizontal: "auto"}}
-            />
-          </Header>
-        }
-        {this.headersContentFromColumns()}
-        <Header style={this.styleForHeader({style: {}, type: "actions"})} />
-      </Row>
-    )
-  }
-
   renderItem = ({index, item: model}) => {
     const {preparedColumns, tableSettingFullCacheKey} = this.s
 
@@ -540,7 +565,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       return (
         <View>
           <Text>
-            Loading...
+            {this.t(".loading_dot_dot_dot", {defaultValue: "Loading..."})}
           </Text>
         </View>
       )
@@ -551,7 +576,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
         cacheKey={model.cacheKey()}
         columnWidths={this.columnWidths()}
         index={index}
-        isSmallScreen={this.tt.isSmallScreen}
         key={model.id()}
         model={model}
         preparedColumns={preparedColumns}
@@ -561,7 +585,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     )
   }
 
-  styleForColumn({column, columnIndex, even, style, type}) {
+  styleForColumn = ({column, columnIndex, even, style, type}) => {
     const defaultStyle = {
       justifyContent: "center",
       padding: 8,
@@ -572,8 +596,13 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     if (type == "actions") {
       defaultStyle.flexDirection = "row"
       defaultStyle.alignItems = "center"
-      defaultStyle.marginLeft = "auto"
-    } else {
+
+      if (this.tt.mdUp) {
+        defaultStyle.marginLeft = "auto"
+      } else {
+        defaultStyle.marginRight = "auto"
+      }
+    } else if (this.tt.mdUp) {
       defaultStyle.borderRight = "1px solid #dbdbdb"
     }
 
@@ -585,12 +614,14 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     return actualStyle
   }
 
-  styleForHeader({column, columnIndex, style, type}) {
+  styleForHeader = ({column, columnIndex, style, type}) => {
     const defaultStyle = {
+      flexDirection: "row",
+      alignItems: "center",
       padding: 8
     }
 
-    if (type != "actions") {
+    if (type != "actions" && this.tt.mdUp) {
       defaultStyle.borderRight = "1px solid #dbdbdb"
     }
 
@@ -621,6 +652,15 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     return actualStyle
   }
 
+  styleForRowHeader() {
+    const actualStyle = {
+      flex: 1,
+      alignItems: "stretch"
+    }
+
+    return actualStyle
+  }
+
   tableControls() {
     const {controls} = this.props
     const {showSettings} = this.s

package/src/table/use-sorting.mjs

@@ -0,0 +1,30 @@
+import {camelize} from "inflection"
+import useQueryParams from "on-location-changed/src/use-query-params.js"
+
+const calculateQParams = (defaultParams, queryParams, searchKey) => {
+  if (searchKey in queryParams) {
+    return JSON.parse(queryParams[searchKey])
+  } else if (defaultParams) {
+    return {...defaultParams}
+  }
+
+  return {}
+}
+
+const useSorting = ({defaultParams, query}) => {
+  const queryParams = useQueryParams()
+  const searchKey = query.queryArgs.searchKey || "q"
+  const qParams = calculateQParams(defaultParams, queryParams, searchKey)
+  const matchSortParam = qParams.s?.match(/^(.+?)( asc| desc|)$/)
+  const sortAttribute = matchSortParam ? camelize(matchSortParam[1], true) : null
+  const sortMode = matchSortParam ? matchSortParam[2].trim() : null
+
+  return {
+    qParams,
+    searchKey,
+    sortAttribute,
+    sortMode
+  }
+}
+
+export default useSorting

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

@@ -1,7 +1,8 @@
-import {memo, useEffect, useMemo, useRef} from "react"
+import {useEffect, useMemo, useRef} from "react"
 import BaseComponent from "../base-component"
 import classNames from "classnames"
 import Collection from "../collection.mjs"
+import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component"

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

@@ -1,10 +1,11 @@
 import BaseComponent from "../base-component"
 import classNames from "classnames"
 import {digg} from "diggerize"
+import memo from "set-state-compare/src/memo"
 import modelClassRequire from "../model-class-require.mjs"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo, useMemo} from "react"
+import {useMemo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import useModelEvent from "../use-model-event.js"
 

package/src/utils/card.jsx

@@ -0,0 +1,49 @@
+import BaseComponent from "../base-component"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import Text from "./text"
+
+export default memo(shapeComponent(class ApiMakerUtilsCard extends BaseComponent {
+  static propTypes = propTypesExact({
+    children: PropTypes.node,
+    controls: PropTypes.node,
+    dataSet: PropTypes.object,
+    header: PropTypes.string,
+    style: PropTypes.object
+  })
+
+  render() {
+    const {children, controls, dataSet, header, style} = this.props
+    const {component, ...restDataSet} = dataSet || {}
+    const actualDataSet = Object.assign(
+      {component: classNames("api-maker/utils/card", component)},
+      restDataSet
+    )
+    const actualStyle = Object.assign(
+      {
+        backgroundColor: "#fff",
+        borderRadius: 15,
+        padding: 30
+      },
+      style
+    )
+
+    return (
+      <View dataSet={actualDataSet} style={actualStyle}>
+        {controls &&
+          <View style={{position: "absolute", top: 15, right: 15}}>
+            {controls}
+          </View>
+        }
+        {header &&
+          <Text style={{fontSize: 24}}>
+            {header}
+          </Text>
+        }
+        {children}
+      </View>
+    )
+  }
+}))

package/src/utils/checkbox.jsx

@@ -1,6 +1,6 @@
 import BaseComponent from "../base-component"
 import {CheckBox, Pressable, View} from "react-native"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"

package/src/utils/modal.jsx

@@ -0,0 +1,59 @@
+import {Modal, Pressable, View} from "react-native"
+import BaseComponent from "../base-component"
+import Card from "./card"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
+import memo from "set-state-compare/src/memo"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import useBreakpoint from "../use-breakpoint"
+
+export default memo(shapeComponent(class ApiMakerUtilsComponent extends BaseComponent {
+  render() {
+    const {xs, sm} = useBreakpoint()
+    const {children, dataSet, ...restProps} = this.props
+    const actualDataSet = Object.assign(
+      {
+        component: "api-maker/utils/modal"
+      },
+      dataSet
+    )
+    let width, maxWidth
+
+    if (xs || sm) {
+      width = "95%"
+    } else {
+      width = "80%"
+      maxWidth = 800
+    }
+
+    return (
+      <Modal dataSet={actualDataSet} {...restProps}>
+        <View
+          style={{
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            height: "100%",
+            backgroundColor: "rgba(0, 0, 0, 0.8)"
+          }}
+        >
+          <Card
+            controls={this.cardHeaderControls()}
+            style={{width, maxWidth}}
+          >
+            {children}
+          </Card>
+        </View>
+      </Modal>
+    )
+  }
+
+  cardHeaderControls() {
+    return (
+      <Pressable onPress={this.tt.onModalClosePress} style={{marginLeft: "auto", padding: 5}}>
+        <FontAwesomeIcon name="remove" />
+      </Pressable>
+    )
+  }
+
+  onModalClosePress = () => this.props.onRequestClose && this.props.onRequestClose()
+}))

package/src/with-can-can.jsx

@@ -1,5 +1,5 @@
 import useCanCan from "./use-can-can.mjs"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 
 export default (WrappedComponent, abilities) => {
   const WithCanCan = (props) => {

package/src/with-collection.jsx

@@ -1,5 +1,5 @@
 import {digg} from "diggerize"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import useCollection from "./use-collection"
 
 export default (WrappedComponent, withCollectionArgs) => memo(() => {

package/src/with-model.jsx

@@ -1,4 +1,4 @@
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import useModel from "./use-model.mjs"
 
 export default (WrappedComponent, modelClass, givenArgs) => {