@kaspernj/api-maker 1.0.433 → 1.0.435

package/src/table/components/flat-list.jsx

@@ -1,6 +1,6 @@
 import BaseComponent from "../../base-component"
 import {FlatList} from "react-native"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 
 export default memo(shapeComponent(class SharedTagble extends BaseComponent {

package/src/table/components/header.jsx

@@ -1,12 +1,20 @@
 import BaseComponent from "../../base-component"
-import {memo} from "react"
+import classNames from "classnames"
+import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import {View} from "react-native"
 
 export default memo(shapeComponent(class SharedTableHeader extends BaseComponent {
   render() {
+    const {dataSet, ...restProps} = this.props
+    const {component, ...restDataSet} = dataSet || {}
+    const actualDataSet = Object.assign(
+      {component: classNames("api-maker/table/header", component)},
+      restDataSet
+    )
+
     return (
-      <View {...this.props} />
+      <View dataSet={actualDataSet} {...restProps} />
     )
   }
 }))

package/src/table/components/row.jsx

@@ -1,14 +1,16 @@
 import BaseComponent from "../../base-component"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
+import useBreakpoint from "../../use-breakpoint"
 import {View} from "react-native"
 
 export default memo(shapeComponent(class SharedTableRow extends BaseComponent {
   render() {
     const {style, ...restProps} = this.props
+    const {name: breakpoint, smDown} = useBreakpoint()
     const actualStyle = Object.assign(
       {
-        flexDirection: "row"
+        flexDirection: breakpoint == "sm" || smDown ? "column" : "row"
       },
       style
     )

package/src/table/filters/attribute-element.jsx

@@ -2,7 +2,7 @@ import BaseComponent from "../../base-component"
 import {digg} from "diggerize"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {Pressable} from "react-native"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../../utils/text"

package/src/table/filters/filter-form.jsx

@@ -4,9 +4,10 @@ import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
 import {Form} from "../../form"
 import Input from "../../inputs/input"
+import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo, useMemo, useRef} from "react"
+import {useMemo, useRef} from "react"
 import {ActivityIndicator, View} from "react-native"
 import ReflectionElement from "./reflection-element"
 import ScopeElement from "./scope-element"

package/src/table/filters/filter.jsx

@@ -3,7 +3,7 @@ import BaseComponent from "../../base-component"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../../utils/text"
 

package/src/table/filters/index.jsx

@@ -5,7 +5,7 @@ import FilterForm from "./filter-form"
 import LoadSearchModal from "./load-search-modal"
 import SaveSearchModal from "./save-search-modal"
 import PropTypes from "prop-types"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import {TableSearch} from "../../models.mjs.erb"
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"

package/src/table/filters/load-search-modal.jsx

@@ -2,7 +2,8 @@ import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
 import BaseComponent from "../../base-component"
 import classNames from "classnames"
 import {digg} from "diggerize"
-import {memo, useMemo} from "react"
+import memo from "set-state-compare/src/memo"
+import {useMemo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import {TableSearch} from "../../models.mjs.erb"
 import {Pressable, View} from "react-native"

package/src/table/filters/reflection-element.jsx

@@ -1,7 +1,7 @@
 import BaseComponent from "../../base-component"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {Pressable} from "react-native"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../../utils/text"

package/src/table/filters/save-search-modal.jsx

@@ -6,7 +6,7 @@ import {Form} from "../../form"
 import Input from "../../bootstrap/input"
 import modelClassRequire from "../../model-class-require.mjs"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 
 const TableSearch = modelClassRequire("TableSearch")

package/src/table/filters/scope-element.jsx

@@ -1,6 +1,6 @@
 import BaseComponent from "../../base-component"
 import PropTypes from "prop-types"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {Pressable} from "react-native"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../../utils/text"

package/src/table/header-column-content.jsx

@@ -0,0 +1,54 @@
+import BaseComponent from "../base-component"
+import {digs} from "diggerize"
+import memo from "set-state-compare/src/memo"
+import {View} from "react-native"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import SortLink from "../bootstrap/sort-link"
+import Text from "../utils/text"
+
+export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseComponent {
+  static propTypes = propTypesExact({
+    column: PropTypes.object.isRequired,
+    sortLinkProps: PropTypes.object,
+    table: PropTypes.object.isRequired,
+    tableSettingColumn: PropTypes.object.isRequired
+  })
+
+  render() {
+    const {column, table, tableSettingColumn} = this.p
+    const {defaultParams} = table.props
+    const {styleForHeaderText} = table.tt
+    const {query} = digs(table.collection, "query")
+    const columnProps = table.columnProps(column)
+
+    return (
+      <View
+        dataSet={{
+          component: "api-maker/table/header-column-content",
+          identifier: tableSettingColumn.identifier()
+        }}
+        style={{display: "flex", flexDirection: "row", alignItems: "center"}}
+        {...columnProps}
+      >
+        {tableSettingColumn.hasSortKey() && query &&
+          <SortLink
+            attribute={tableSettingColumn.sortKey()}
+            defaultParams={defaultParams}
+            query={query}
+            style={{whiteSpace: "nowrap", overflow: "hidden"}}
+            textProps={{ellipsizeMode: "clip", numberOfLines: 1, style: styleForHeaderText()}}
+            title={table.headerLabelForColumn(column)}
+            {...this.props.sortLinkProps}
+          />
+        }
+        {(!tableSettingColumn.hasSortKey() || !query) &&
+          <Text ellipsizeMode="clip" numberOfLines={1}>
+            {table.headerLabelForColumn(column)}
+          </Text>
+        }
+      </View>
+    )
+  }
+}))

package/src/table/header-column.jsx

@@ -2,13 +2,15 @@ import BaseComponent from "../base-component"
 import classNames from "classnames"
 import {digs} from "diggerize"
 import Header from "./components/header"
-import {memo} from "react"
+import HeaderColumnContent from "./header-column-content"
+import memo from "set-state-compare/src/memo"
 import {Platform, Pressable, View} from "react-native"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import SortLink from "../bootstrap/sort-link"
 import Text from "../utils/text"
+import useBreakpoint from "../use-breakpoint"
 import useEventListener from "../use-event-listener.mjs"
 import Widths from "./widths"
 
@@ -23,6 +25,10 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
   })
 
   setup() {
+    const {name: breakpoint, mdUp, smDown} = useBreakpoint()
+
+    this.setInstance({breakpoint, mdUp, smDown})
+
     useEventListener(window, "mousemove", this.tt.onWindowMouseMove)
     useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
 
@@ -34,6 +40,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
   }
 
   render() {
+    const {breakpoint, mdUp, smDown} = this.tt
     const {column, resizing, table, tableSettingColumn, width} = this.p
     const {defaultParams} = table.props
     const {styleForHeader, styleForHeaderText} = table.tt
@@ -43,7 +50,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
     const actualStyle = Object.assign(
       {
         cursor: resizing ? "col-resize" : undefined,
-        width
+        width: mdUp ? width : "100%"
       },
       style
     )
@@ -58,36 +65,22 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
         style={styleForHeader({style: actualStyle})}
         {...restColumnProps}
       >
-        <View style={{display: "flex", flexDirection: "row", alignItems: "center"}}>
-          {tableSettingColumn.hasSortKey() && query &&
-            <SortLink
-              attribute={tableSettingColumn.sortKey()}
-              defaultParams={defaultParams}
-              query={query}
-              style={{whiteSpace: "nowrap", overflow: "hidden"}}
-              textProps={{ellipsizeMode: "clip", numberOfLines: 1, style: styleForHeaderText()}}
-              title={table.headerLabelForColumn(column)}
-            />
-          }
-          {(!tableSettingColumn.hasSortKey() || !query) &&
-            <Text ellipsizeMode="clip" numberOfLines={1}>
-              {table.headerLabelForColumn(column)}
-            </Text>
-          }
-        </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
-          }}
-        />
+        <HeaderColumnContent column={column} table={table} tableSettingColumn={tableSettingColumn} />
+        {mdUp &&
+          <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>
     )
   }

package/src/table/header-select.jsx

@@ -0,0 +1,72 @@
+import {Pressable, View} from "react-native"
+import BaseComponent from "../base-component"
+import Collection from "../collection"
+import HeaderColumnContent from "./header-column-content"
+import memo from "set-state-compare/src/memo"
+import Modal from "../utils/modal"
+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 useSorting from "./use-sorting"
+
+export default memo(shapeComponent(class ApiMakerTableHeaderSelect extends BaseComponent {
+  static propTypes = propTypesExact({
+    preparedColumns: PropTypes.array.isRequired,
+    query: PropTypes.instanceOf(Collection).isRequired,
+    table: PropTypes.object
+  })
+
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.table.header_select"})
+    const {preparedColumns, query} = this.p
+    const {qParams, searchKey, sortAttribute, sortMode} = useSorting({query})
+
+    this.useStates({
+      modalOpen: false
+    })
+    this.setInstance({qParams, searchKey, sortAttribute, sortMode, t})
+    this.sortedByPreparedColumn = preparedColumns.find((preparedColumn) => preparedColumn.tableSettingColumn.sortKey() == sortAttribute)
+  }
+
+  render() {
+    const {sortedByPreparedColumn, sortMode, t} = this.tt
+    const {table} = this.p
+    const column = sortedByPreparedColumn?.column
+    const columnLabel = column && table.headerLabelForColumn(column)
+
+    return (
+      <View dataSet={{component: "api-maker/table/header-select"}}>
+        {this.s.modalOpen &&
+          <Modal dataSet={{class: "table-header-select-modal"}} onRequestClose={this.tt.onModalRequestClose} transparent>
+            {this.p.preparedColumns.map(({column, tableSettingColumn}) =>
+              <View
+                key={tableSettingColumn.identifier()}
+                style={{marginVertical: 5}}
+              >
+                <HeaderColumnContent column={column} table={table} tableSettingColumn={tableSettingColumn} sortLinkProps={{usePressable: true}} />
+              </View>
+            )}
+          </Modal>
+        }
+        <Pressable onPress={this.tt.onSortedByPress}>
+          <Text>
+            {sortedByPreparedColumn && sortMode == "asc" &&
+              t(".sorted_by_column", {column: columnLabel, defaultValue: "Sorted by %{column}"})
+            }
+            {sortedByPreparedColumn && sortMode == "desc" &&
+              t(".sorted_by_column_reversed", {column: columnLabel, defaultValue: "Sorted by %{column} reversed"})
+            }
+            {!sortedByPreparedColumn &&
+              t(".not_sorted", {defaultValue: "Not sorted"})
+            }
+          </Text>
+        </Pressable>
+      </View>
+    )
+  }
+
+  onModalRequestClose = () => this.setState({modalOpen: false})
+  onSortedByPress = () => this.setState({modalOpen: true})
+}))

package/src/table/model-column.jsx

@@ -6,16 +6,16 @@ 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 memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../utils/text"
+import useBreakpoint from "../use-breakpoint"
 
 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,
@@ -23,11 +23,19 @@ export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseCo
   })
 
   render() {
-    const {column, columnIndex, even, isSmallScreen, model, table, width} = this.props
+    const {mdUp} = useBreakpoint()
+    const {column, columnIndex, even, 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}}),
+      table.styleForColumn({
+        column,
+        columnIndex,
+        even,
+        style: {
+          width: mdUp ? width : "100%"
+        }
+      }),
       style
     )
 
@@ -40,9 +48,9 @@ export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseCo
         style={actualStyle}
         {...restColumnProps}
       >
-        {isSmallScreen &&
+        {!mdUp &&
           <View dataSet={{class: "table--column-label"}}>
-            <Text>
+            <Text style={{fontWeight: "bold"}}>
               {table.headerLabelForColumn(column)}
             </Text>
           </View>

package/src/table/model-row.jsx

@@ -11,7 +11,7 @@ import ModelColumn from "./model-column"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import Row from "./components/row"
-import {memo} from "react"
+import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 
 const WorkerPluginsCheckbox = React.lazy(() => import("./worker-plugins-checkbox"))
@@ -21,7 +21,6 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
     cacheKey: PropTypes.string.isRequired,
     columnWidths: PropTypes.object.isRequired,
     index: PropTypes.number.isRequired,
-    isSmallScreen: PropTypes.bool.isRequired,
     model: PropTypes.object.isRequired,
     table: PropTypes.object.isRequired,
     preparedColumns: PropTypes.array,
@@ -86,14 +85,13 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
   }
 
   columnsContentFromColumns(model, even) {
-    const {isSmallScreen, table, preparedColumns} = this.p
+    const {table, preparedColumns} = this.p
 
     return preparedColumns?.map(({column, tableSettingColumn, width}, columnIndex) => columnVisible(column, tableSettingColumn) &&
       <ModelColumn
         column={column}
         columnIndex={columnIndex}
         even={even}
-        isSmallScreen={isSmallScreen}
         key={columnIdentifier(column)}
         model={model}
         table={table}

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

@@ -1,8 +1,9 @@
 import BaseComponent from "../../base-component"
 import columnIdentifier from "../column-identifier.mjs"
+import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import {memo, useEffect, useRef} from "react"
+import {useEffect, useRef} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import Text from "../../utils/text"
 import {View} from "react-native"

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

@@ -4,7 +4,7 @@ import columnIdentifier from "../column-identifier.mjs"
 import columnVisible from "../column-visible.mjs"
 import {saveAs} from "file-saver"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
-import {memo} from "react"
+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"

package/src/table/settings/index.jsx

@@ -2,7 +2,8 @@ import BaseComponent from "../../base-component"
 import columnIdentifier from "../column-identifier.mjs"
 import ColumnRow from "./column-row"
 import DownloadAction from "./download-action"
-import {memo, useRef} from "react"
+import {useRef} from "react"
+import memo from "set-state-compare/src/memo"
 import Modal from "../../modal"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"