@kaspernj/api-maker 1.0.2011 → 1.0.2013

package/src/table/use-sorting.js

@@ -0,0 +1,35 @@
+import {camelize} from "inflection"
+import useQueryParams from "on-location-changed/build/use-query-params"
+
+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)
+  let matchSortParam
+
+  if (typeof qParams.s == "string") {
+    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/variables.scss

@@ -0,0 +1,11 @@
+$xs-from: 0;
+$xs-to: 575;
+$sm-from: 576px;
+$sm-to: 767px;
+$md-from: 768px;
+$md-to: 991px;
+$lg-from: 992px;
+$lg-to: 1199px;
+$xl-from: 1200px;
+$xl-to: 1399px;
+$xxl-from: 1400px;

package/src/table/widths.jsx

@@ -0,0 +1,87 @@
+import {Animated, Easing} from "react-native"
+import {digg} from "diggerize"
+
+export default class TableWidths {
+  constructor({columns, table, width}) {
+    this.columns = columns
+    this.tableWidth = width
+    this.table = table
+    this.setWidths()
+  }
+
+  setWidths() {
+    this.columnsWidths = {}
+
+    let widthLeft = this.tableWidth
+    const updateData = []
+
+    // Set widths that are defined
+    for (const columnIndex in this.columns) {
+      const column = this.columns[columnIndex]
+      const tableSettingColumn = column.tableSettingColumn
+
+      if (column.animatedPosition) throw new Error("Column already had an animated position")
+
+      column.animatedPosition = new Animated.ValueXY()
+      column.animatedZIndex = new Animated.Value(0)
+
+      if (tableSettingColumn.hasWidth()) {
+        if (column.animatedWidth) throw new Error("Column already had an animated width")
+
+        column.animatedWidth = new Animated.Value(tableSettingColumn.width())
+        column.width = tableSettingColumn.width()
+
+        widthLeft -= tableSettingColumn.width()
+      }
+    }
+
+    // Calculate how many columns are shown
+    const columnsWithoutWidth = this.columns.filter((column) => !column.tableSettingColumn.hasWidth())
+    let amountOfColumns = columnsWithoutWidth.length
+
+    amountOfColumns++ // Actions column
+
+    if (this.table.p.workplace) amountOfColumns++
+
+    // Set widths of columns without
+    for (const columnIndex in this.columns) {
+      const column = this.columns[columnIndex]
+      const tableSettingColumn = column.tableSettingColumn
+
+      if (!tableSettingColumn.hasWidth()) {
+        let newWidth = widthLeft / amountOfColumns
+
+        if (newWidth < 200) newWidth = 200
+
+        column.animatedWidth = new Animated.Value(newWidth)
+        column.width = newWidth
+
+        updateData << {
+          id: tableSettingColumn.id(),
+          width: newWidth
+        }
+      }
+    }
+
+    if (updateData.length > 0) {
+      // FIXME: Should update the columns on the backend if anything changed
+    }
+  }
+
+  getWidthOfColumn(identifier) {
+    const column = this.columns.find((column) => column.tableSettingColumn.identifier() == identifier)
+
+    if (!column) throw new Error(`No such column: ${identifier}`)
+
+    return digg(column, "width")
+  }
+
+  setWidthOfColumn({identifier, width}) {
+    const column = this.columns.find((column) => column.tableSettingColumn.identifier() == identifier)
+
+    if (!column) throw new Error(`No such column: ${identifier}`)
+
+    column.width = width
+    column.animatedWidth.setValue(width)
+  }
+}

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

@@ -0,0 +1,112 @@
+import React, {useEffect, useMemo, useRef} from "react"
+import BaseComponent from "../base-component"
+import classNames from "classnames"
+import Collection from "../collection"
+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 {simpleObjectDifferent} from "set-state-compare/src/diff-utils"
+import useModelEvent from "../use-model-event"
+
+const Checkbox = memo(shapeComponent(class Checkbox extends BaseComponent {
+  render() {
+    const {indeterminate, ...restProps} = this.props
+    const checkboxRef = useRef()
+
+    useEffect(() => {
+      checkboxRef.current.indeterminate = indeterminate
+    })
+
+    return (
+      <input ref={checkboxRef} type="checkbox" {...restProps} />
+    )
+  }
+}))
+
+export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckAllCheckbox extends BaseComponent {
+  static propTypes = propTypesExact({
+    currentWorkplace: PropTypes.object,
+    query: PropTypes.instanceOf(Collection),
+    style: PropTypes.object
+  })
+
+  setup() {
+    this.useStates({
+      checked: false,
+      indeterminate: false
+    })
+
+    useMemo(() => {
+      this.updateAllChecked()
+    }, [])
+
+    useModelEvent(this.props.currentWorkplace, "workplace_links_created", this.tt.onLinksCreated)
+    useModelEvent(this.props.currentWorkplace, "workplace_links_destroyed", this.tt.onLinksDestroyed)
+  }
+
+  componentDidUpdate(prevProps) {
+    const previousParams = prevProps.query.params()
+    const currentParams = this.props.query.params()
+
+    if (simpleObjectDifferent(previousParams, currentParams)) {
+      this.updateAllChecked()
+    }
+  }
+
+  async updateAllChecked() {
+    const {query, currentWorkplace} = this.props
+    const queryLinksStatusResult = await currentWorkplace.queryLinksStatus({query})
+    const allChecked = queryLinksStatusResult.all_checked
+    const someChecked = queryLinksStatusResult.some_checked
+
+    this.setState({
+      checked: allChecked,
+      indeterminate: someChecked
+    })
+  }
+
+  render() {
+    const {className, style} = this.props
+    const {checked, indeterminate} = this.state
+
+    return (
+      <Checkbox
+        checked={checked}
+        className={classNames("api-maker--table--worker-plugins-check-all-checkbox", className)}
+        indeterminate={indeterminate}
+        onChange={this.onCheckedChanged}
+        style={style}
+      />
+    )
+  }
+
+  modelClassName = () => this.props.query.modelClass().modelClassData().name
+
+  onCheckedChanged = async (e) => {
+    e.preventDefault()
+
+    const {currentWorkplace, query} = this.props
+    const checkbox = e.target
+
+    if (checkbox.checked) {
+      await currentWorkplace.addQuery({query})
+      this.setState({checked: true, indeterminate: false})
+    } else {
+      await currentWorkplace.removeQuery({query})
+      this.setState({checked: false, indeterminate: false})
+    }
+  }
+
+  onLinksCreated = ({args}) => {
+    if (args.created[this.modelClassName()]) {
+      this.updateAllChecked()
+    }
+  }
+
+  onLinksDestroyed = ({args}) => {
+    if (args.destroyed[this.modelClassName()]) {
+      this.updateAllChecked()
+    }
+  }
+}))

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

@@ -0,0 +1,104 @@
+import React, {useMemo} from "react"
+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"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import useModelEvent from "../use-model-event"
+
+const Workplace = modelClassRequire("Workplace")
+
+export default memo(shapeComponent(class ApiMakerTableWorkerPluginsCheckbox extends BaseComponent {
+  static propTypes = PropTypesExact({
+    currentWorkplace: PropTypes.object,
+    model: PropTypes.object.isRequired,
+    style: PropTypes.object
+  })
+
+  setup() {
+    this.useStates({
+      checked: false,
+      linkLoaded: false
+    })
+
+    useMemo(() => {
+      this.loadCurrentLink()
+    }, [])
+
+    useModelEvent(this.p.currentWorkplace, "workplace_links_created", this.tt.onLinksCreated)
+    useModelEvent(this.p.currentWorkplace, "workplace_links_destroyed", this.tt.onLinksDestroyed)
+  }
+
+  async loadCurrentLink() {
+    const {model} = this.props
+    const response = await Workplace.linkFor({model_class: model.modelClassData().name, model_id: model.id()})
+    const link = digg(response, "link")
+
+    this.setState({
+      checked: Boolean(link),
+      linkLoaded: true
+    })
+  }
+
+  render() {
+    const {className, model, style} = this.props
+    const {checked, linkLoaded} = this.state
+
+    if (!linkLoaded) {
+      return null
+    }
+
+    return (
+      <input
+        checked={checked}
+        className={classNames("api-maker--table--worker-plugins-checkbox", className)}
+        data-checked={checked}
+        data-model-id={model.id()}
+        onChange={this.tt.onCheckedChanged}
+        style={style}
+        type="checkbox"
+      />
+    )
+  }
+
+  onCheckedChanged = (e) => {
+    e.preventDefault()
+
+    const {model} = this.props
+    const checked = e.target.checked
+
+    if (checked) {
+      Workplace.createLink({model_class: model.modelClassData().name, model_id: model.id()})
+    } else {
+      const modelClassName = model.modelClassData().name
+      const params = {models: {}}
+
+      params.models[modelClassName] = [model.id()]
+
+      Workplace.destroyLinks(params)
+    }
+  }
+
+  onLinksCreated = ({args}) => {
+    const {model} = this.p
+    const id = model.id()
+    const modelClassName = model.modelClassData().name
+
+    if (args.created[modelClassName] && args.created[modelClassName].includes(id)) {
+      this.setState({checked: true})
+    }
+  }
+
+  onLinksDestroyed = ({args}) => {
+    const {model} = this.p
+    const id = model.id()
+    const modelClassName = model.modelClassData().name
+
+    if (args.destroyed[modelClassName] && args.destroyed[modelClassName].includes(id)) {
+      this.setState({checked: false})
+    }
+  }
+}))

package/src/translated-attributes.js

@@ -0,0 +1,11 @@
+export default function apiMakerTranslatedAttributes(attributeNames, availableLocales) {
+  const translatedAttributes = []
+
+  for (const attribute of attributeNames) {
+    for (const locale of availableLocales) {
+      translatedAttributes.push(`${attribute}${locale.substring(0, 1).toUpperCase()}${locale.substring(1, 99)}`)
+    }
+  }
+
+  return translatedAttributes
+}

package/src/{translated-collections.mjs → translated-collections.js}

@@ -1,9 +1,10 @@
 import {digg} from "diggerize"
-import translatedCollectionsData from "./translated-collections-data.mjs.erb"
+import I18nOnSteroids from "i18n-on-steroids"
+import translatedCollectionsData from "translated-collections-data.json"
 
 export default class ApiMakerTranslatedCollections {
   static get (modelClass, collectionName) {
-    const locale = I18n.locale
+    const locale = I18nOnSteroids.getCurrent().locale
     const modelClassName = digg(modelClass.modelClassData(), "name")
     const collection = digg(translatedCollectionsData, modelClassName, collectionName, locale, "collection_array")
 

package/src/updated-attribute.jsx

@@ -1,5 +1,5 @@
 import {digg} from "diggerize"
-import ModelEvents from "./model-events.mjs"
+import ModelEvents from "./model-events"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import React from "react"

package/src/url-encode.js

@@ -0,0 +1,18 @@
+import escapeStringRegexp from "escape-string-regexp"
+
+const replaces = {
+  " ": "+",
+  "&": "%26",
+  "#": "%23",
+  "+": "%2B",
+  "/": "%2F",
+  "?": "%3F"
+}
+
+const regexp = new RegExp(`(${Object.keys(replaces).map(escapeStringRegexp).join("|")})`, "g")
+
+const urlEncode = (string) => {
+  return String(string).replaceAll(regexp, (character) => replaces[character])
+}
+
+export default urlEncode

package/src/use-breakpoint.js

@@ -0,0 +1,87 @@
+import {useCallback, useLayoutEffect} from "react"
+import config from "./config"
+import {Dimensions} from "react-native"
+import * as inflection from "inflection"
+import isExpo from "./is-expo"
+import useShape from "set-state-compare/src/use-shape"
+
+const calculateBreakPoint = (windowObject) => {
+  let windowWidth
+
+  if (isExpo) {
+    windowWidth = windowObject.width
+  } else {
+    // Use 'window.innerWidth' outside Expo because sometimes window width excludes scroll
+    windowWidth = window.innerWidth
+  }
+
+  const result = {}
+
+  for (const breakpointData of config.getBreakPoints()) {
+    const breakpoint = breakpointData[0]
+    const width = breakpointData[1]
+
+    if (!result.name && windowWidth >= width) {
+      result.name = breakpoint
+      result[`${breakpoint}Down`] = true
+    } else {
+      result[`${breakpoint}Down`] = !result.name
+    }
+
+    result[`${breakpoint}Up`] = Boolean(result.name)
+  }
+
+  if (result.name) {
+    return result
+  }
+
+  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: windowObject}) => {
+    const breakpoint = calculateBreakPoint(windowObject)
+
+    if (breakpoint.name != s.s.breakpoint.name) {
+      s.set({breakpoint})
+    }
+  }, [])
+
+  s.useStates({
+    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 {
+    styling,
+    ...s.s.breakpoint
+  }
+}
+
+export default useBreakpoint

package/src/use-can-can.js

@@ -0,0 +1,55 @@
+import CanCan from "./can-can"
+import {useCallback, useMemo, useState} from "react"
+import useCurrentUser from "./use-current-user"
+import useEventEmitter from "./use-event-emitter"
+import useShape from "set-state-compare/src/use-shape"
+
+const useCanCan = (abilitiesCallback, dependencies) => {
+  const currentUser = useCurrentUser()
+  const s = useShape({abilitiesCallback})
+
+  s.useStates({
+    canCan: null,
+    lastUpdate: new Date()
+  })
+
+  if (!dependencies) {
+    dependencies = [currentUser?.id()]
+  }
+
+  const loadAbilities = useCallback(async () => {
+    const canCan = CanCan.current()
+    const abilities = s.p.abilitiesCallback()
+
+    await canCan.loadAbilities(abilities)
+
+    s.set({canCan, lastUpdate: new Date()})
+  }, [])
+
+  const onResetAbilities = useCallback(async () => {
+    s.set({canCan: null}, {silent: true})
+    await loadAbilities()
+  }, [])
+
+  const loadAbilitiesOnNew = useCallback(async () => {
+    const canCan = s.s.canCan
+
+    s.set({canCan: null}, {silent: true})
+
+    if (canCan) {
+      await canCan?.resetAbilities()
+    } else {
+      await loadAbilities()
+    }
+  }, [])
+
+  useMemo(() => {
+    loadAbilitiesOnNew()
+  }, dependencies)
+
+  useEventEmitter(CanCan.current().events, "onResetAbilities", onResetAbilities)
+
+  return s.s.canCan
+}
+
+export default useCanCan