@kaspernj/api-maker 1.0.433 → 1.0.434

package/package.json

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

package/src/bootstrap/sort-link.jsx

@@ -1,5 +1,6 @@
 import BaseComponent from "../base-component"
 import * as inflection from "inflection"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import PropTypes from "prop-types"
 import qs from "qs"
 import {memo} from "react"
@@ -24,16 +25,49 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
   setup() {
     this.queryParams = useQueryParams()
     this.searchKey = this.p.query.queryArgs.searchKey || "q"
+    this.qParams = this.calculateQParams()
+    this.attribute = inflection.underscore(this.p.attribute)
+    this.calculateIsSortedByAttribute()
   }
 
-  attribute = () => inflection.underscore(this.p.attribute)
+  calculateIsSortedByAttribute () {
+    const {attribute} = this.tt
+    const params = this.tt.qParams
+
+    if (params.s == attribute) {
+      this.isSortedByAttribute = true
+      this.sortMode = "asc"
+    } else if (params.s == `${attribute} asc`) {
+      this.isSortedByAttribute = true
+      this.sortMode = "asc"
+    } else if (params.s == `${attribute} desc`) {
+      this.isSortedByAttribute = true
+      this.sortMode = "desc"
+    } else {
+      this.isSortedByAttribute = false
+      this.sortMode = null
+    }
+  }
 
-  href () {
-    const qParams = this.qParams()
+  calculateQParams() {
+    const {defaultParams} = this.props
     const {queryParams, searchKey} = this.tt
+
+    if (searchKey in queryParams) {
+      return JSON.parse(queryParams[searchKey])
+    } else if (defaultParams) {
+      return {...defaultParams}
+    }
+
+    return {}
+  }
+
+  href () {
+    const qParams = this.tt.qParams
+    const {attribute, queryParams, searchKey, sortMode} = this.tt
     const newQueryParams = {...queryParams}
 
-    qParams.s = `${this.attribute()} ${this.sortMode()}` // eslint-disable-line id-length
+    qParams.s = `${attribute} ${sortMode == "asc" ? "desc" : "asc"}` // eslint-disable-line id-length
 
     newQueryParams[searchKey] = JSON.stringify(qParams)
 
@@ -43,16 +77,8 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
     return newPath
   }
 
-  isSortedByAttribute () {
-    const params = this.qParams()
-
-    if (params.s == this.attribute()) return true
-    if (params.s == `${this.attribute()} asc`) return true
-
-    return false
-  }
-
   render () {
+    const {isSortedByAttribute, sortMode} = this.tt
     const LinkComponent = this.linkComponent()
     const {attribute, className, defaultParams, linkComponent, onChanged, query, textProps, title, ...restProps} = this.props
 
@@ -62,39 +88,27 @@ export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseC
           attribute,
           class: className,
           component: "api-maker--bootstrap--sort-link",
-          sortMode: this.sortMode()
+          sortMode: this.tt.sortMode
         }}
+        style={{display: "flex", flexDirection: "row", alignItems: "center"}}
         to={this.href()}
         {...restProps}
       >
         <Text {...textProps}>
           {this.title()}
         </Text>
+        {isSortedByAttribute && sortMode == "asc" &&
+          <FontAwesomeIcon name="chevron-down" size={14} style={{marginLeft: 3}} />
+        }
+        {isSortedByAttribute && sortMode == "desc" &&
+          <FontAwesomeIcon name="chevron-up" size={14} style={{marginLeft: 3}} />
+        }
       </LinkComponent>
     )
   }
 
   linkComponent = () => this.props.linkComponent || Link
 
-  qParams() {
-    const {defaultParams} = this.props
-    const {queryParams, searchKey} = this.tt
-
-    if (searchKey in queryParams) {
-      return JSON.parse(queryParams[searchKey])
-    } else if (defaultParams) {
-      return {...defaultParams}
-    }
-
-    return {}
-  }
-
-  sortMode () {
-    if (this.isSortedByAttribute()) return "desc"
-
-    return "asc"
-  }
-
   title () {
     const {attribute, query} = this.p
     const {title} = this.props

package/src/table/components/row.jsx

@@ -1,14 +1,16 @@
 import BaseComponent from "../../base-component"
 import {memo} from "react"
 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/header-column.jsx

@@ -9,6 +9,7 @@ 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 +24,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 +39,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 +49,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
     const actualStyle = Object.assign(
       {
         cursor: resizing ? "col-resize" : undefined,
-        width
+        width: mdUp ? width : "100%"
       },
       style
     )
@@ -75,19 +81,21 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
             </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
-          }}
-        />
+        {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/model-column.jsx

@@ -9,6 +9,7 @@ import propTypesExact from "prop-types-exact"
 import {memo} from "react"
 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({
@@ -23,11 +24,19 @@ export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseCo
   })
 
   render() {
+    const {mdUp} = useBreakpoint()
     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}}),
+      table.styleForColumn({
+        column,
+        columnIndex,
+        even,
+        style: {
+          width: mdUp ? width : "100%"
+        }
+      }),
       style
     )
 
@@ -42,7 +51,7 @@ export default memo(shapeComponent(class ApiMakerTableModelColumn extends BaseCo
       >
         {isSmallScreen &&
           <View dataSet={{class: "table--column-label"}}>
-            <Text>
+            <Text style={{fontWeight: "bold"}}>
               {table.headerLabelForColumn(column)}
             </Text>
           </View>

package/src/table/table.jsx

@@ -99,13 +99,14 @@ 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
     })
 
@@ -517,7 +518,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const {queryWithoutPagination} = this.tt
 
     return (
-      <Row dataSet={{class: "live-table-header-row"}} style={this.styleForRow()}>
+      <Row dataSet={{class: "api-maker/table/header-row"}} style={this.styleForRowHeader()}>
         {this.p.workplace && this.s.currentWorkplace &&
           <Header style={this.styleForHeader({style: {width: 41}})}>
             <WorkerPluginsCheckAllCheckbox
@@ -561,7 +562,8 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     )
   }
 
-  styleForColumn({column, columnIndex, even, style, type}) {
+  styleForColumn = ({column, columnIndex, even, style, type}) => {
+    const {mdUp} = this.tt
     const defaultStyle = {
       justifyContent: "center",
       padding: 8,
@@ -572,7 +574,12 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     if (type == "actions") {
       defaultStyle.flexDirection = "row"
       defaultStyle.alignItems = "center"
-      defaultStyle.marginLeft = "auto"
+
+      if (mdUp) {
+        defaultStyle.marginLeft = "auto"
+      } else {
+        defaultStyle.marginRight = "auto"
+      }
     } else {
       defaultStyle.borderRight = "1px solid #dbdbdb"
     }
@@ -621,6 +628,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