@kaspernj/api-maker 1.0.460 → 1.0.462

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

@@ -1,5 +1,6 @@
-// import "../../../../src/super-admin/layout/menu/style"
+import {StyleSheet, View} from "react-native"
 import BaseComponent from "../../../base-component"
+import Icon from "../../../utils/icon"
 import memo from "set-state-compare/src/memo"
 import Link from "../../../link"
 import MenuContent from "./menu-content"
@@ -10,9 +11,46 @@ import PropTypesExact from "prop-types-exact"
 import React from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import Text from "../../../utils/text"
+import useBreakpoint from "../../../use-breakpoint"
 import useCurrentUser from "../../../use-current-user"
 import useI18n from "i18n-on-steroids/src/use-i18n"
-import {View} from "react-native"
+import {WithDefaultStyle} from "../../../utils/default-style"
+
+const styles = StyleSheet.create({
+  root: {
+    base: {
+      position: "fixed",
+      zIndex: 9,
+      overflowY: "auto",
+      overflowX: "hidden",
+      top: 0,
+      left: 0,
+      height: "100%",
+      flexDirection: "column",
+      backgroundColor: "#1b1c1e"
+    },
+    mdDown: {
+      width: "100%",
+      maxWidth: 250,
+      maxHeight: "100vh",
+      overflowY: "auto"
+    },
+    mdUp: {
+      width: 250
+    },
+    lgUp: {
+      width: 290
+    }
+  },
+  userName: {
+    flexShrink: 1,
+    marginLeft: 8
+  },
+  userNameContainer: {
+    overflow: "hidden",
+    maxWidth: 140
+  }
+})
 
 export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseComponent {
   static propTypes = PropTypesExact({
@@ -23,53 +61,99 @@ export default memo(shapeComponent(class ComponentsAdminLayoutMenu extends BaseC
   })
 
   setup() {
+    const {lgUp, mdDown, mdUp} = useBreakpoint()
     const {t} = useI18n({namespace: "js.api_maker.super_admin.layout.menu"})
     const currentUser = useCurrentUser()
 
-    this.setInstance({currentUser, t})
+    this.setInstance({currentUser, lgUp, mdDown, mdUp, t})
   }
 
   render() {
-    const {currentUser, t} = this.tt
+    const {currentUser, lgUp, mdDown, mdUp, t} = this.tt
     const {active, noAccess, triggered} = this.props
 
+    const style = [styles.root.base]
+
+    if (mdDown) style.push(styles.root.mdDown)
+    if (mdUp) style.push(styles.root.mdUp)
+    if (lgUp) style.push(styles.root.lgUp)
+
+    if (mdDown && !triggered) {
+      return null
+    }
+
     return (
-      <View dataSet={{component: "super-admin--layout--menu", triggered}}>
-        <div className="menu-logo">
-          <Link dataSet={{class: "menu-logo-link"}} to={Params.withParams({})}>
-            <Text>
-              Admin
-            </Text>
-          </Link>
-        </div>
-        <div className="menu-items-center">
-          {!noAccess &&
-            <MenuContent active={active} />
-          }
-        </div>
-        <div className="menu-items-bottom">
-          {currentUser &&
-            <div className="menu-user-section">
-              <div className="menu-user-icon">
-                <i className="fa fa-user" />
-              </div>
-              <div className="menu-user-name">
-                <div className="menu-user-name-container">
-                  {currentUser.name()}
-                </div>
-              </div>
-            </div>
-          }
-          {currentUser &&
-            <MenuItem
-              active
-              className="sign-out-menu-item"
-              icon="sign-out-alt"
-              label={t(".sign_out", {defaultValue: "Sign out"})}
-              onClick={this.tt.onSignOutClicked}
-            />
-          }
-        </div>
+      <View dataSet={{component: "super-admin--layout--menu", triggered}} style={style}>
+        <WithDefaultStyle style={{Text: {color: "#fff"}}}>
+          <View
+            dataSet={{class: "menu-logo"}}
+            style={{
+              overflow: "hidden",
+              marginTop: 25,
+              marginRight: "auto",
+              marginLeft: "auto"
+            }}
+          >
+            <Link dataSet={{class: "menu-logo-link"}} to={Params.withParams({})}>
+              <Text
+                style={{
+                  fontSize: 42,
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                }}
+              >
+                Admin
+              </Text>
+            </Link>
+          </View>
+          <View dataSet={{class: "menu-items-center"}} style={{marginTop: 25}}>
+            {!noAccess &&
+              <MenuContent active={active} />
+            }
+          </View>
+          <View dataSet={{class: "menu-items-bottom"}} style={{marginTop: "auto", marginBottom: 25}}>
+            {currentUser &&
+              <View
+                dataSet={{class: "menu-user-section"}}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  marginRight: 25,
+                  marginBottom: 25,
+                  marginLeft: 25
+                }}
+              >
+                <View
+                  dataSet={{class: "menu-user-icon"}}
+                  style={{
+                    width: 44,
+                    height: 44,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: "#abbcd0",
+                    borderRadius: "50%"
+                  }}
+                >
+                  <Icon name="user" size={12} />
+                </View>
+                <View className="menu-user-name" style={styles.userName}>
+                  <Text dataSet={{class: "menu-user-name-container"}} style={styles.userNameContainer}>
+                    {currentUser.name()}
+                  </Text>
+                </View>
+              </View>
+            }
+            {currentUser &&
+              <MenuItem
+                active
+                className="sign-out-menu-item"
+                icon="sign-out-alt"
+                label={t(".sign_out", {defaultValue: "Sign out"})}
+                onClick={this.tt.onSignOutClicked}
+              />
+            }
+          </View>
+        </WithDefaultStyle>
       </View>
     )
   }

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

@@ -1,49 +1,6 @@
 @use "@kaspernj/api-maker/src/super-admin/stylesheets/variables" as *;
 
 [data-component="super-admin--layout--menu"] {
-  position: fixed;
-  z-index: 9;
-  overflow-y: auto;
-  overflow-x: hidden;
-  top: 0;
-  left: 0;
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  background: #1b1c1e;
-  color: #fff;
-
-  @media (max-width: $sm-to) {
-    width: 100%;
-    max-width: 250px;
-    max-height: 100vh;
-    overflow-y: auto;
-
-    &[data-triggered="false"] {
-      display: none;
-    }
-  }
-
-  @media (min-width: $md-from) {
-    width: 250px;
-  }
-
-  @media (min-width: $lg-from) {
-    width: 290px;
-  }
-
-  .menu-logo {
-    overflow: hidden;
-    width: 80%;
-    margin-top: 25px;
-    margin-right: auto;
-    margin-left: auto;
-    font-size: 42px;
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
   .menu-logo-link {
     &:link,
     &:visited {
@@ -51,55 +8,4 @@
       text-decoration: none;
     }
   }
-
-  .menu-items-center {
-    margin-top: 25px;
-  }
-
-  .menu-items-bottom {
-    margin-top: auto;
-    margin-bottom: 25px;
-  }
-
-  .menu-user-section {
-    display: flex;
-    align-items: center;
-    margin-right: 25px;
-    margin-bottom: 25px;
-    margin-left: 25px;
-  }
-
-  .menu-user-icon {
-    display: flex;
-    width: 44px;
-    min-width: 44px;
-    max-width: 44px;
-    height: 44px;
-    align-items: center;
-    justify-content: center;
-    background: #abbcd0;
-    border-radius: 50%;
-  }
-
-  .menu-user-name {
-    flex-shrink: 1;
-    margin-left: 8px;
-  }
-
-  .menu-user-name-container {
-    overflow: hidden;
-    max-width: 140px;
-  }
-
-  .menu-user-items {
-    position: relative;
-    margin-left: auto;
-  }
-
-  .menu-user-items-link {
-    &:link,
-    &:visited {
-      color: #dededf;
-    }
-  }
 }

package/src/table/filters/filter.jsx

@@ -1,6 +1,6 @@
 import {Pressable, View} from "react-native"
 import BaseComponent from "../../base-component"
-import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
+import Icon from "../../utils/icon"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import memo from "set-state-compare/src/memo"
@@ -47,7 +47,7 @@ export default memo(shapeComponent(class ApiMakerTableFilter extends BaseCompone
           </Text>
         </Pressable>
         <Pressable dataSet={{class: "remove-filter-button"}} onPress={this.tt.onRemoveFilterPressed} style={{marginLeft: 6}}>
-          <FontAwesomeIcon name="remove" />
+          <Icon name="remove" />
         </Pressable>
       </View>
     )

package/src/table/header-column.jsx

@@ -1,9 +1,9 @@
 import React, {useMemo} from "react"
 import BaseComponent from "../base-component"
 import classNames from "classnames"
-import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import Header from "./components/header"
 import HeaderColumnContent from "./header-column-content"
+import Icon from "../utils/icon"
 import memo from "set-state-compare/src/memo"
 import {Animated, PanResponder} from "react-native"
 import PropTypes from "prop-types"
@@ -100,7 +100,7 @@ export default memo(shapeComponent(class ApiMakerTableHeaderColumn extends BaseC
         {...restColumnProps}
       >
         {mdUp &&
-          <FontAwesomeIcon name="bars" style={{marginRight: 3, fontSize: 12}} {...touchProps} />
+          <Icon name="bars" style={{marginRight: 3, fontSize: 12}} {...touchProps} />
         }
         <HeaderColumnContent column={column} table={table} tableSettingColumn={tableSettingColumn} />
         {mdUp &&

package/src/table/model-row.jsx

@@ -4,7 +4,7 @@ import Column from "./components/column"
 import columnIdentifier from "./column-identifier"
 import EventEmitter from "events"
 import FlashMessage from "../flash-message"
-import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
+import Icon from "../utils/icon"
 import * as inflection from "inflection"
 import modelCallbackArgs from "./model-callback-args"
 import Link from "../link"
@@ -76,17 +76,17 @@ export default memo(shapeComponent(class ApiMakerBootStrapLiveTableModelRow exte
           {actionsContent && actionsContent(this.tt.modelCallbackArgs)}
           {viewPath &&
             <Link dataSet={{class: "view-button"}} style={{marginLeft: 2, marginRight: 2}} to={viewPath}>
-              <FontAwesomeIcon name="search" size={18} />
+              <Icon name="search" size={18} />
             </Link>
           }
           {editPath &&
             <Link dataSet={{class: "edit-button"}} style={{marginLeft: 2, marginRight: 2}} to={editPath}>
-              <FontAwesomeIcon name="pencil" size={20} />
+              <Icon name="pencil" size={20} />
             </Link>
           }
           {destroyEnabled && model.can("destroy") &&
             <Pressable dataSet={{class: "destroy-button"}} style={{marginLeft: 2, marginRight: 2}} onPress={this.tt.onDestroyClicked}>
-              <FontAwesomeIcon name="remove" size={22} />
+              <Icon name="remove" size={22} />
             </Pressable>
           }
         </Column>

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

@@ -3,7 +3,7 @@ import ColumnContent from "../column-content"
 import columnIdentifier from "../column-identifier"
 import columnVisible from "../column-visible"
 import {saveAs} from "file-saver"
-import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
+import Icon from "../../utils/icon"
 import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
@@ -21,7 +21,7 @@ export default memo(shapeComponent(class ApiMakerTableSettingsDownloadAction ext
   render() {
     return (
       <Pressable onPress={this.tt.onDownloadPress} style={{flexDirection: "row", alignItems: "center"}}>
-        <FontAwesomeIcon name="download" size={20} />
+        <Icon name="download" size={20} />
         <Text style={{marginLeft: 5}}>
           Download
         </Text>

package/src/table/table.jsx

@@ -11,11 +11,11 @@ import DraggableSort from "../draggable-sort/index"
 import EventEmitter from "events"
 import Filters from "./filters"
 import FlatList from "./components/flat-list"
-import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
 import {Form} from "../form"
 import Header from "./components/header"
 import HeaderColumn from "./header-column"
 import HeaderSelect from "./header-select"
+import Icon from "../utils/icon"
 import * as inflection from "inflection"
 import memo from "set-state-compare/src/memo"
 import modelClassRequire from "../model-class-require"
@@ -732,14 +732,14 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       <View style={{flexDirection: "row"}}>
         {controls && controls({models, qParams, query, result})}
         <Pressable dataSet={{class: "filter-button"}} onPress={this.tt.onFilterClicked}>
-          <FontAwesomeIcon name="search" size={20} />
+          <Icon name="search" size={20} />
         </Pressable>
         <View style={{position: "relative"}}>
           {showSettings &&
             <Settings onRequestClose={this.tt.onRequestCloseSettings} table={this} />
           }
           <Pressable dataSet={{class: "settings-button"}} onPress={this.tt.onSettingsClicked}>
-            <FontAwesomeIcon name="gear" size={20} />
+            <Icon name="gear" size={20} />
           </Pressable>
         </View>
       </View>

package/src/translated-collections.js

@@ -1,6 +1,6 @@
 import {digg} from "diggerize"
 import I18nOnSteroids from "i18n-on-steroids"
-import translatedCollectionsData from "../src/translated-collections-data.js.erb"
+import translatedCollectionsData from "translated-collections-data.json"
 
 export default class ApiMakerTranslatedCollections {
   static get (modelClass, collectionName) {

package/src/use-breakpoint.js

@@ -1,6 +1,7 @@
 import {useCallback, useLayoutEffect} from "react"
 import apiMakerConfig from "@kaspernj/api-maker/build/config"
 import {Dimensions} from "react-native"
+import * as inflection from "inflection"
 import useShape from "set-state-compare/src/use-shape"
 
 const calculateBreakPoint = (window) => {
@@ -26,6 +27,8 @@ const calculateBreakPoint = (window) => {
   throw new Error(`Couldn't not find breakpoint from window width: ${windowWidth}`)
 }
 
+const sizeTypes = ["down", "up"]
+
 const useBreakpoint = () => {
   const s = useShape()
   const onCalled = useCallback(({window}) => {
@@ -40,13 +43,34 @@ const useBreakpoint = () => {
     breakpoint: () => calculateBreakPoint(Dimensions.get("window"))
   })
 
+  const styling = useCallback((args) => {
+    const style = Object.assign({}, args.base)
+
+    for (const breakpointData of apiMakerConfig.getBreakPoints()) {
+      const breakpoint = breakpointData[0]
+
+      for (const sizeType of sizeTypes) {
+        const breakpointWithSizeType = `${breakpoint}${inflection.camelize(sizeType)}`
+
+        if (args[breakpointWithSizeType] && s.s.breakpoint[breakpointWithSizeType]) {
+          Object.assign(style, args[breakpointWithSizeType])
+        }
+      }
+    }
+
+    return style
+  }, [])
+
   useLayoutEffect(() => {
     const subscription = Dimensions.addEventListener("change", onCalled)
 
     return () => subscription?.remove()
   })
 
-  return s.s.breakpoint
+  return {
+    styling,
+    ...s.s.breakpoint
+  }
 }
 
 export default useBreakpoint

package/src/utils/icon.jsx

@@ -0,0 +1,21 @@
+import BaseComponent from "../base-component"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {useDefaultStyle} from "./default-style"
+
+export default memo(shapeComponent(class ApiMakerUtilsIcon extends BaseComponent {
+  render() {
+    const defaultStyle = useDefaultStyle()
+    const {style, ...restProps} = this.props
+    const actualStyle = Object.assign(
+      {color: defaultStyle.Text.color},
+      style
+    )
+
+    return (
+      <FontAwesomeIcon style={actualStyle} {...restProps} />
+    )
+  }
+}))

package/src/utils/modal.jsx

@@ -1,7 +1,7 @@
 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 Icon from "../utils/icon"
 import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import useBreakpoint from "../use-breakpoint"
@@ -50,7 +50,7 @@ export default memo(shapeComponent(class ApiMakerUtilsComponent extends BaseComp
   cardHeaderControls() {
     return (
       <Pressable onPress={this.tt.onModalClosePress} style={{marginLeft: "auto", padding: 5}}>
-        <FontAwesomeIcon name="remove" />
+        <Icon name="remove" />
       </Pressable>
     )
   }

package/src/with-api-maker.jsx

@@ -0,0 +1,31 @@
+import React, {createContext, useContext, useMemo} from "react"
+import ApiMakerConfig from "./config"
+import memo from "set-state-compare/src/memo"
+
+const ApiMakerContext = createContext()
+const useApiMaker = () => {
+  const apiMakerContext = useContext(ApiMakerContext)
+
+  if (apiMakerContext) {
+    return apiMakerContext
+  }
+
+  return {
+    config: ApiMakerConfig
+  }
+}
+
+const WithApiMaker = memo(({children, config, ...restProps}) => {
+  const restPropsKeys = Object.keys(restProps)
+  const value = useMemo(() => ({config}), [config])
+
+  if (restPropsKeys.length > 0) throw new Error(`Unhandled props: ${restPropsKeys.join(", ")}`)
+
+  return (
+    <ApiMakerContext.Provider value={value}>
+      {children}
+    </ApiMakerContext.Provider>
+  )
+})
+
+export {useApiMaker, WithApiMaker}