@kaspernj/api-maker 1.0.404 → 1.0.405

package/package.json

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

package/src/icon.jsx

@@ -0,0 +1,51 @@
+import BaseComponent from "./base-component"
+import {Image} from "react-native"
+import {memo, useMemo} from "react"
+import PropTypes from "prop-types"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+
+export default memo(shapeComponent(class ComponentsIcon extends BaseComponent {
+  static propTypes = {
+    icon: PropTypes.string.isRequired
+  }
+
+  setup() {
+    const {icon} = this.p
+
+    this.useStates({
+      IconComponent: null,
+      imageSource: null
+    })
+
+    useMemo(() => {
+      this.loadIcon()
+    }, [icon])
+  }
+
+  async loadIcon() {
+    const {icon} = this.p
+    const IconComponent = await import(`./icons/${icon}.svg`)
+
+    this.setState({IconComponent})
+  }
+
+  render() {
+    const {icon, style, ...restProps} = this.props
+    const {IconComponent} = this.s
+    const actualStyle = Object.assign(
+      {
+        width: 16,
+        height: 16
+      },
+      style
+    )
+
+    if (!IconComponent) {
+      return null
+    }
+
+    return (
+      <Image source={IconComponent.default} style={actualStyle} {...restProps} />
+    )
+  }
+}))

package/src/icons/bars-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>

package/src/icons/gear-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>

package/src/icons/magnifying-glass-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>

package/src/icons/pen-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/></svg>

package/src/icons/xmark-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>

package/src/run-last.mjs

@@ -33,7 +33,7 @@ export default class RunLast {
   }
 
   run() {
-    clearTimeout(this.flushTimeout)
+    this.clearTimeout()
     this.callback()
   }
 }

package/src/super-admin/layout/header/index.jsx

@@ -1,10 +1,11 @@
 import "./style"
 import BaseComponent from "../../../base-component"
+import Icon from "../../../icon"
 import {memo, useRef} from "react"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
-import {Text, View} from "react-native"
+import {Pressable, Text, View} from "react-native"
 import useBreakpoint from "../../../use-breakpoint"
 import useEventListener from "../../../use-event-listener"
 
@@ -104,24 +105,21 @@ export default memo(shapeComponent(class ApiMakerSuperAdminLayoutHeader extends
             </View>
           </View>
         }
-        <div className="burger-menu-container">
+        <View dataSet={{class: "burger-menu-container"}}>
           {actions &&
-            <a className="actions-link" href="#" onClick={this.tt.onGearsClicked}>
-              <i className="fa fa-gear" />
-            </a>
+            <Pressable dataSet={{class: "actions-link"}} onPress={this.tt.onGearsClicked} style={{marginRight: 8, fontSize: 22}}>
+              <Icon icon="gear-solid" />
+            </Pressable>
           }
-          <a className="burger-menu-link" href="#" onClick={onTriggerMenu}>
-            <i className="fa fa-bars" />
-          </a>
-        </div>
+          <Pressable dataSet={{class: "burger-menu-link"}} onPress={onTriggerMenu}>
+            <Icon icon="bars-solid" />
+          </Pressable>
+        </View>
       </View>
     )
   }
 
-  onGearsClicked = (e) => {
-    e.preventDefault()
-    this.setState({headerActionsActive: !this.s.headerActionsActive})
-  }
+  onGearsClicked = () => this.setState({headerActionsActive: !this.s.headerActionsActive})
 
   onWindowMouseUp = (e) => {
     // Close the header actions menu if clicked happened outside

package/src/super-admin/layout/header/style.scss

@@ -7,10 +7,6 @@
         display: block;
         padding: 11px;
 
-        .fa {
-          margin-right: 5px;
-        }
-
         + .action-button {
           border-top: 1px solid #c9c9c9;
         }
@@ -47,7 +43,7 @@
     }
   }
 
-  .burger-menu-container {
+  [data-class="burger-menu-container"] {
     @media (max-width: $sm-to) {
       margin-left: auto;
       font-size: 28px;
@@ -57,17 +53,4 @@
       display: none;
     }
   }
-
-  .actions-link {
-    margin-right: 8px;
-    font-size: 22px;
-  }
-
-  .actions-link,
-  .burger-menu-link {
-    &:link,
-    &:visited {
-      color: #1b1c1e;
-    }
-  }
 }

package/src/table/model-row.jsx

@@ -5,6 +5,7 @@ import Column from "./components/column"
 import columnIdentifier from "./column-identifier.mjs"
 import columnVisible from "./column-visible.mjs"
 import {digs} from "diggerize"
+import Icon from "../icon"
 import * as inflection from "inflection"
 import Link from "../link"
 import MoneyFormatter from "../money-formatter"
@@ -62,23 +63,17 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
           {actionsContent && actionsContent(this.modelCallbackArgs)}
           {viewPath &&
             <Link dataSet={{class: "view-button"}} to={viewPath}>
-              <Text>
-                &#x1F50D;
-              </Text>
+              <Icon icon="magnifying-glass-solid" />
             </Link>
           }
           {editPath &&
             <Link dataSet={{class: "edit-button"}} to={editPath}>
-              <Text>
-                &#x270E;
-              </Text>
+              <Icon icon="pen-solid" />
             </Link>
           }
           {destroyEnabled && model.can("destroy") &&
             <Pressable dataSet={{class: "destroy-button"}} onPress={this.tt.onDestroyClicked}>
-              <Text>
-                &#x2715;
-              </Text>
+              <Icon icon="xmark-solid" />
             </Pressable>
           }
         </Column>

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

@@ -33,7 +33,7 @@ export default memo(shapeComponent(class ColumnRow extends BaseComponent {
     }
 
     return (
-      <View dataSet={{component: "api-maker--table--settings--column-row"}} style={{zIndex: 1, justifyContent: "center"}}>
+      <View dataSet={{component: "api-maker--table--settings--column-row"}} style={{justifyContent: "center"}}>
         <label style={{whiteSpace: "nowrap"}}>
           <input
             className="api-maker--table--setings--column-checkbox"

package/src/table/settings/index.jsx

@@ -1,4 +1,3 @@
-import "./style"
 import BaseComponent from "../../base-component"
 import columnIdentifier from "../column-identifier.mjs"
 import ColumnRow from "./column-row"
@@ -6,8 +5,7 @@ import {memo, useRef} from "react"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
-import useEventListener from "../../use-event-listener"
-import {Text, View} from "react-native"
+import {Modal, Text, View} from "react-native"
 
 export default memo(shapeComponent(class ApiMakerTableSettings extends BaseComponent {
   static propTypes = propTypesExact({
@@ -18,7 +16,6 @@ export default memo(shapeComponent(class ApiMakerTableSettings extends BaseCompo
   setup() {
     this.rootRef = useRef()
 
-    useEventListener(window, "mouseup", this.tt.onWindowMouseUp)
     this.useStates({
       fixedTableLayout: this.tableSetting().fixedTableLayout()
     })
@@ -31,27 +28,34 @@ export default memo(shapeComponent(class ApiMakerTableSettings extends BaseCompo
     const {preparedColumns} = table.s
 
     return (
-      <div className="api-maker--table--settings" ref={this.tt.rootRef}>
-        <View style={{marginBottom: 5}}>
-          <Text style={{fontSize: 16, fontWeight: "bold"}}>
-            Settings
-          </Text>
+      <Modal onBackdropPress={this.p.onRequestClose} onRequestClose={this.p.onRequestClose} transparent>
+        <View
+          dataSet={{class: "api-maker--table--settings"}}
+          style={{
+            width: "100%",
+            maxWidth: 800,
+            marginHorizontal: "auto",
+            marginVertical: "auto",
+            padding: 20,
+            backgroundColor: "#fff",
+            border: "1px solid black"
+          }}
+        >
+          <View style={{marginBottom: 5}}>
+            <Text style={{fontSize: 16, fontWeight: "bold"}}>
+              Settings
+            </Text>
+          </View>
+          <View style={{marginBottom: 5}}>
+            <Text style={{fontSize: 16, fontWeight: "bold"}}>
+              Columns
+            </Text>
+          </View>
+          {preparedColumns?.map(({column, tableSettingColumn}) =>
+            <ColumnRow column={column} key={columnIdentifier(column)} table={table} tableSettingColumn={tableSettingColumn} />
+          )}
         </View>
-        <View style={{marginBottom: 5}}>
-          <Text style={{fontSize: 16, fontWeight: "bold"}}>
-            Columns
-          </Text>
-        </View>
-        {preparedColumns?.map(({column, tableSettingColumn}) =>
-          <ColumnRow column={column} key={columnIdentifier(column)} table={table} tableSettingColumn={tableSettingColumn} />
-        )}
-      </div>
+      </Modal>
     )
   }
-
-  onWindowMouseUp = (e) => {
-    if (this.tt.rootRef.current && !this.tt.rootRef.current.contains(e.target)) {
-      this.p.onRequestClose()
-    }
-  }
 }))

package/src/table/table.jsx

@@ -1,15 +1,17 @@
 import "./style"
+import {digg, digs} from "diggerize"
+import {Pressable, View} from "react-native"
 import BaseComponent from "../base-component"
 import Card from "../bootstrap/card"
 import classNames from "classnames"
 import Collection from "../collection"
 import columnVisible from "./column-visible.mjs"
 import debounce from "debounce"
-import {digg, digs} from "diggerize"
 import Filters from "./filters"
 import FlatList from "./components/flat-list"
 import Header from "./components/header"
 import HeaderColumn from "./header-column"
+import Icon from "../icon"
 import * as inflection from "inflection"
 import modelClassRequire from "../model-class-require.mjs"
 import ModelRow from "./model-row"
@@ -27,7 +29,6 @@ import uniqunize from "uniqunize"
 import useBreakpoint from "../use-breakpoint"
 import useCollection from "../use-collection"
 import useQueryParams from "on-location-changed/src/use-query-params.js"
-import {View} from "react-native"
 import Widths from "./widths"
 
 const paginationOptions = [30, 60, 90, ["All", "all"]]
@@ -80,6 +81,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     queryName: PropTypes.string,
     select: PropTypes.object,
     selectColumns: PropTypes.object,
+    styles: PropTypes.object,
     viewModelPath: PropTypes.func,
     workplace: PropTypes.bool.isRequired
   }
@@ -235,7 +237,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }
 
     return (
-      <div className={this.className()}>
+      <div className={this.className()} style={this.props.styles?.container}>
         {showNoRecordsAvailableContent &&
           <div className="live-table--no-records-available-content">
             {noRecordsAvailableContent({models, qParams, overallCount})}
@@ -370,7 +372,13 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
           this.filterForm()
         }
         {card &&
-          <Card className={classNames("live-table--table-card", "mb-4", className)} controls={this.tableControls()} header={headerContent} footer={this.tableFooter()} {...restProps}>
+          <Card
+            className={classNames("live-table--table-card", "mb-4", className)}
+            controls={this.tableControls()}
+            header={headerContent}
+            footer={this.tableFooter()}
+            {...restProps}
+          >
             {flatList}
           </Card>
         }
@@ -484,20 +492,20 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const {models, qParams, query, result} = digs(this.collection, "models", "qParams", "query", "result")
 
     return (
-      <>
+      <View style={{flexDirection: "row"}}>
         {controls && controls({models, qParams, query, result})}
-        <a className="filter-button" href="#" onClick={this.tt.onFilterClicked}>
-          <i className="fa fa-fw fa-magnifying-glass la la-fw la-search" />
-        </a>
-        <span style={{position: "relative"}}>
+        <Pressable dataSet={{class: "filter-button"}} onPress={this.tt.onFilterClicked}>
+          <Icon icon="magnifying-glass-solid" />
+        </Pressable>
+        <View style={{position: "relative"}}>
           {showSettings &&
             <Settings onRequestClose={this.tt.onRequestCloseSettings} table={this} />
           }
-          <a className="settings-button" href="#" onClick={this.tt.onSettingsClicked}>
-            <i className="fa fa-fw fa-gear la la-fw la-gear" />
-          </a>
-        </span>
-      </>
+          <Pressable dataSet={{class: "settings-button"}} onPress={this.tt.onSettingsClicked}>
+            <Icon icon="gear-solid" />
+          </Pressable>
+        </View>
+      </View>
     )
   }
 

package/src/table/settings/style.scss

@@ -1,8 +0,0 @@
-.api-maker--table--settings {
-  position: absolute;
-  right: 0px;
-  padding: 12px;
-  background-color: #fff;
-  border: 1px solid black;
-  font-size: 12px;
-}