@kaspernj/api-maker 1.0.2011 → 1.0.2013

package/src/inputs/input.jsx

@@ -0,0 +1,260 @@
+import AutoSubmit from "./auto-submit"
+import BaseComponent from "../base-component"
+import {dig, digg, digs} from "diggerize"
+import inputWrapper from "./input-wrapper"
+import memo from "set-state-compare/src/memo"
+import Money from "./money"
+import PropTypes from "prop-types"
+import React, {useMemo, useRef} from "react"
+import replaceall from "replaceall"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import strftime from "strftime"
+import {useForm} from "../form"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+import useUpdatedEvent from "../use-updated-event"
+
+const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extends BaseComponent {
+  static defaultProps = {
+    autoRefresh: false,
+    autoSubmit: false,
+    model: null,
+    localizedNumber: false
+  }
+
+  static propTypes = {
+    attribute: PropTypes.string,
+    autoRefresh: PropTypes.bool.isRequired,
+    autoSubmit: PropTypes.bool.isRequired,
+    className: PropTypes.string,
+    formatValue: PropTypes.func,
+    id: PropTypes.string,
+    localizedNumber: PropTypes.bool.isRequired,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    onMatchValidationError: PropTypes.func,
+    type: PropTypes.string
+  }
+
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.inputs.input"})
+    const {autoRefresh, inputProps, model} = this.p
+    const {defaultValue, name} = inputProps
+
+    this.form = useForm()
+    this.visibleInputRef = useRef()
+    this.t = t
+
+    this.useStates({
+      blankInputName: digg(inputProps, "type") == "file"
+    })
+
+    useMemo(() => {
+      if (name) {
+        this.tt.form?.setValue(name, defaultValue)
+      }
+    }, [])
+
+    useUpdatedEvent(model, this.tt.onModelUpdated, {active: Boolean(autoRefresh && model)})
+  }
+
+  render () {
+    const {
+      attribute,
+      autoRefresh,
+      autoSubmit,
+      defaultValue,
+      formatValue,
+      id,
+      inputProps,
+      inputRef,
+      localizedNumber,
+      model,
+      name,
+      onChange,
+      onErrors,
+      onMatchValidationError,
+      type,
+      wrapperOpts,
+      ...restProps
+    } = this.props
+
+    const sharedProps = {
+      id: localizedNumber ? null : inputProps.id,
+      name: localizedNumber ? null : inputProps.name,
+    }
+    const ref = localizedNumber ? this.visibleInputRef : this.inputReference()
+    const {ref: inputPropsRef, ...inputPropsWithoutRef} = inputProps
+
+    return (
+      <>
+        {localizedNumber &&
+          <input
+            defaultValue={defaultValue}
+            id={inputProps.id}
+            name={this.inputName()}
+            ref={this.inputReference()}
+            type="hidden"
+          />
+        }
+        {type == "money" &&
+          <Money
+            attribute={attribute}
+            defaultValue={this.inputDefaultValueLocalized()}
+            inputRef={this.inputReference()}
+            model={model}
+            onChange={this.onInputChanged}
+            {...inputPropsWithoutRef}
+            {...sharedProps}
+            {...restProps}
+          />
+        }
+        {type == "textarea" &&
+          <textarea
+            defaultValue={this.inputDefaultValueLocalized()}
+            onChange={this.onInputChanged}
+            ref={ref}
+            {...inputPropsWithoutRef}
+            {...sharedProps}
+            {...restProps}
+          />
+        }
+        {type != "money" && type != "textarea" &&
+          <input
+            defaultValue={this.inputDefaultValueLocalized()}
+            onChange={this.onInputChanged}
+            ref={ref}
+            {...inputPropsWithoutRef}
+            {...sharedProps}
+            name={localizedNumber ? null : this.inputName()}
+            {...restProps}
+          />
+        }
+      </>
+    )
+  }
+
+  actualValue (visibleInput) {
+    const {t} = this.tt
+    const {localizedNumber} = digs(this.props, "localizedNumber")
+    const value = digg(visibleInput, "value")
+
+    if (localizedNumber) {
+      const decimal = t("number.currency.format.separator")
+      const integerSeparator = t("number.currency.format.delimiter")
+
+      let unformatted = replaceall(integerSeparator, "", value)
+
+      unformatted = replaceall(decimal, ".", unformatted)
+
+      return unformatted
+    }
+
+    return value
+  }
+
+  autoSubmit = () => new AutoSubmit({component: this}).autoSubmit()
+
+  formatValue (value) {
+    const {formatValue, type} = this.props
+
+    if (formatValue) {
+      return formatValue(value)
+    } else if (value instanceof Date && !isNaN(value.getTime())) {
+      // We need to use a certain format for datetime-local
+      if (type == "datetime-local") {
+        return strftime("%Y-%m-%dT%H:%M:%S", value)
+      } else if (type == "date") {
+        return strftime("%Y-%m-%d", value)
+      }
+    }
+
+    return value
+  }
+
+  inputDefaultValueLocalized () {
+    const {t} = this.tt
+    const {defaultValue} = this.props
+    const {localizedNumber} = digs(this.props, "localizedNumber")
+
+    if (localizedNumber && defaultValue !== null && defaultValue !== undefined) {
+      const separator = t("number.currency.format.separator")
+      const delimiter = t("number.currency.format.delimiter")
+
+      let formatted = `${defaultValue}`
+
+      formatted = replaceall(".", "{{separator}}", formatted)
+      formatted = replaceall(",", "{{delimiter}}", formatted)
+      formatted = replaceall("{{separator}}", separator, formatted)
+      formatted = replaceall("{{delimiter}}", delimiter, formatted)
+
+      return formatted
+    }
+
+    return defaultValue
+  }
+
+  inputName () {
+    if (this.state.blankInputName) return ""
+
+    return this.props.inputProps.name
+  }
+
+  inputReference = () => digg(this, "props", "inputProps", "ref")
+
+  onModelUpdated = (args) => {
+    const inputRef = this.inputReference()
+
+    if (!inputRef.current) {
+      // This can happen if the component is being unmounted
+      return
+    }
+
+    const {attribute} = digs(this.props, "attribute")
+    const newModel = digg(args, "model")
+    const currentValue = digg(inputRef, "current", "value")
+    const newValue = newModel.readAttribute(attribute)
+    const newFormattedValue = this.formatValue(newValue)
+
+    if (currentValue != newFormattedValue) {
+      inputRef.current.value = newFormattedValue
+    }
+  }
+
+  onInputChanged = (e) => {
+    const {form} = this.tt
+    const {attribute, autoSubmit, inputProps, model, onChange} = this.props
+    const {localizedNumber} = digs(this.props, "localizedNumber")
+    const {name} = inputProps
+
+    if (localizedNumber) this.inputReference().current.value = this.actualValue(digg(e, "target"))
+
+    if (attribute && autoSubmit && model) this.delayAutoSubmit()
+    if (digg(inputProps, "type") == "file") this.setState({blankInputName: this.getBlankInputName()})
+
+    if (form && name) {
+      form.setValue(name, e.target.value)
+    }
+
+    if (onChange) onChange(e)
+  }
+
+  delayAutoSubmit () {
+    if (this.delayAutoSubmitTimeout) {
+      clearTimeout(this.delayAutoSubmitTimeout)
+    }
+
+    this.delayAutoSubmitTimeout = setTimeout(this.autoSubmit, 200)
+  }
+
+  // This fixes an issue in Firefox and ActiveStorage, where uploads would be a blank string if a file wasn't chosen
+  getBlankInputName () {
+    const value = dig(this.inputReference(), "current", "value")
+
+    if (this.props.inputProps.type == "file" && value == "")
+      return true
+  }
+}))
+
+export {ApiMakerInputsInput as Input}
+export default inputWrapper(ApiMakerInputsInput)

package/src/inputs/money.jsx

@@ -0,0 +1,187 @@
+import React, {useRef} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import classNames from "classnames"
+import Config from "../config"
+import {digg} from "diggerize"
+import idForComponent from "./id-for-component"
+import * as inflection from "inflection"
+import memo from "set-state-compare/src/memo"
+import MoneyFormatter from "../money-formatter"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+
+export default memo(shapeComponent(class ApiMakerInputsMoney extends ShapeComponent {
+  static defaultProps = {
+    disabled: false,
+    showCurrencyOptions: true
+  }
+
+  static propTypes = PropTypesExact({
+    attribute: PropTypes.string,
+    centsInputName: PropTypes.string,
+    className: PropTypes.string,
+    currenciesCollection: PropTypes.array,
+    currencyName: PropTypes.string,
+    currencyRef: PropTypes.object,
+    defaultValue: PropTypes.object,
+    disabled: PropTypes.bool.isRequired,
+    id: PropTypes.string,
+    inputRef: PropTypes.object,
+    label: PropTypes.node,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    placeholder: PropTypes.node,
+    showCurrencyOptions: PropTypes.bool,
+    small: PropTypes.bool,
+    type: PropTypes.string,
+    wholeRef: PropTypes.object
+  })
+
+  setup() {
+    this.inputRef = useRef()
+    this.currencyRefBackup = useRef()
+    this.currencyRef = this.props.currencyRef || this.currencyRefBackup
+    this.wholeRefBackup = useRef()
+    this.wholeRef = this.props.wholeRef || this.wholeRefBackup
+  }
+
+  getInputRef () {
+    return this.props.inputRef || this.inputRef
+  }
+
+  render () {
+    const {attribute, className, disabled, model, showCurrencyOptions} = this.props
+    let {currenciesCollection} = this.props
+
+    if (!currenciesCollection) currenciesCollection = Config.getCurrenciesCollection()
+
+    return (
+      <div className="api-maker-inputs-money" data-attribute={attribute} data-model-id={model?.id()}>
+        <input defaultValue={this.inputDefaultCentsValue()} id={this.inputCentsId()} name={this.inputCentsName()} ref={this.getInputRef()} type="hidden" />
+        <input
+          className={classNames("money-cents", className)}
+          defaultValue={this.inputDefaultValue()}
+          disabled={disabled}
+          id={this.inputId()}
+          onBlur={digg(this, "setAmount")}
+          onChange={digg(this, "setCents")}
+          onKeyUp={digg(this, "setCents")}
+          placeholder={this.props.placeholder}
+          ref={this.wholeRef}
+          type="text"
+        />
+        {showCurrencyOptions &&
+          <select
+            className="money-currency"
+            defaultValue={this.inputCurrencyValue()}
+            disabled={disabled}
+            id={this.inputCurrencyId()}
+            name={this.inputCurrencyName()}
+            onChange={digg(this, "onCurrencyChanged")}
+            ref={this.currencyRef}
+          >
+            <option></option>
+            {currenciesCollection.map((option) => (
+              <option key={`select-option-${option[1]}`} value={option[1]}>
+                {this.props.small && option[1]}
+                {!this.props.small && option[0]}
+              </option>
+            ))}
+          </select>
+        }
+      </div>
+    )
+  }
+
+  inputCurrencyId () {
+    return `${this.inputId()}_currency`
+  }
+
+  inputCurrencyName () {
+    if ("currencyName" in this.props)
+      return this.props.currencyName
+
+    return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}_currency]`
+  }
+
+  inputCurrencyValue () {
+    const {defaultValue} = this.props
+
+    if (defaultValue) {
+      return MoneyFormatter.currencyFromMoney(defaultValue).code
+    } else {
+      return "DKK"
+    }
+  }
+
+  inputDefaultValue () {
+    const {defaultValue} = this.props
+
+    if (defaultValue) {
+      return MoneyFormatter.fromMoney({amount: defaultValue.amount, currency: this.inputCurrencyValue()}, {decimals: 2, excludeCurrency: true}).toString()
+    } else {
+      return ""
+    }
+  }
+
+  inputDefaultCentsValue () {
+    const {defaultValue} = this.props
+
+    if (this.getInputRef().current) {
+      return digg(this.getInputRef(), "current", "value")
+    } else if (defaultValue) {
+      return MoneyFormatter.amountFromMoney(defaultValue)
+    }
+  }
+
+  inputCentsId () {
+    return `${this.inputId()}_cents`
+  }
+
+  inputCentsName () {
+    if ("name" in this.props)
+      return this.props.name
+
+    return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}_cents]`
+  }
+
+  inputId () {
+    return idForComponent(this)
+  }
+
+  onCurrencyChanged = () => {
+    if (this.props.onChange)
+      this.props.onChange()
+  }
+
+  setAmount = () => {
+    const inputElement = this.getInputRef().current
+
+    if (!inputElement.value && inputElement.value == "") {
+      this.wholeRef.current.value = ""
+    } else {
+      const cents = parseFloat(inputElement.value)
+      const formatted = MoneyFormatter.fromMoney({amount: cents, currency: this.inputCurrencyValue()}, {decimals: 2, excludeCurrency: true}).toString()
+
+      this.wholeRef.current.value = formatted
+    }
+  }
+
+  setCents = () => {
+    const inputElement = this.getInputRef().current
+
+    let whole = MoneyFormatter.stringToFloat(this.wholeRef.current.value)
+    let cents = parseInt(whole * 100, 10)
+    let oldCents = parseInt(inputElement.value, 10)
+
+    if (typeof cents == "number") {
+      inputElement.value = cents
+    } else {
+      inputElement.value = ''
+    }
+
+    if (this.props.onChange && oldCents != cents)
+      this.props.onChange()
+  }
+}))

package/src/inputs/name-for-component.js

@@ -0,0 +1,15 @@
+import * as inflection from "inflection"
+
+export default function apiMakerNameForComponent (component) {
+  if ("name" in component.props) {
+    return component.props.name
+  } else if (component.props.attribute && component.props.model) {
+    let attributeName = inflection.underscore(component.props.attribute)
+
+    if (component.props.type == "money") {
+      attributeName += "_cents"
+    }
+
+    return `${component.props.model.modelClassData().paramKey}[${attributeName}]`
+  }
+}

package/src/inputs/select.jsx

@@ -0,0 +1,104 @@
+import BaseComponent from "../base-component"
+import inputWrapper from "./input-wrapper"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {useForm} from "../form"
+
+const ApiMakerInputsSelect = memo(shapeComponent(class ApiMakerInputsSelect extends BaseComponent {
+  static propTypes = {
+    attribute: PropTypes.string,
+    children: PropTypes.node,
+    defaultValue: PropTypes.oneOfType([PropTypes.array, PropTypes.number, PropTypes.string]),
+    id: PropTypes.string,
+    includeBlank: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+    inputProps: PropTypes.object.isRequired,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    options: PropTypes.array,
+    wrapperOpts: PropTypes.object.isRequired
+  }
+
+  setup() {
+    this.form = useForm()
+  }
+
+  render () {
+    const {
+      attribute,
+      children,
+      defaultValue,
+      id,
+      includeBlank,
+      inputProps,
+      inputRef,
+      model,
+      name,
+      onChange,
+      options,
+      wrapperOpts,
+      ...restProps
+    } = this.props
+
+    return (
+      <select onChange={this.tt.onChange} {...inputProps} {...restProps}>
+        {this.includeBlank() &&
+          <option data-include-blank="true">
+            {typeof includeBlank != "boolean" ? includeBlank : null}
+          </option>
+        }
+        {options && options.map((option) =>
+          <option key={this.optionKey(option)} value={this.optionValue(option)}>
+            {this.optionLabel(option)}
+          </option>
+        )}
+        {children}
+      </select>
+    )
+  }
+
+  onChange = (e) => {
+    const {form} = this.tt
+    const {name, onChange} = this.props
+
+    if (form && name) form.setValue(name, e.target.value)
+    if (onChange) onChange(e)
+  }
+
+  optionKey (option) {
+    if (Array.isArray(option)) {
+      return `select-option-${option[1]}`
+    } else {
+      return `select-option-${option}`
+    }
+  }
+
+  optionLabel (option) {
+    if (Array.isArray(option)) {
+      return option[0]
+    } else {
+      return option
+    }
+  }
+
+  optionValue (option) {
+    if (Array.isArray(option)) {
+      return option[1]
+    } else {
+      return option
+    }
+  }
+
+  includeBlank () {
+    if (this.props.includeBlank && !this.props.multiple) {
+      return true
+    } else {
+      return false
+    }
+  }
+}))
+
+export {ApiMakerInputsSelect as Select}
+export default inputWrapper(ApiMakerInputsSelect)

package/src/is-expo.js

@@ -0,0 +1,18 @@
+import {digg, digs} from "diggerize"
+
+let isExpo = false
+
+try {
+  const REQUIRE_TERMINATOR = ""
+  const Constants = require(`expo-constants${REQUIRE_TERMINATOR}`)
+  const executionEnvironment = digg(Constants, "default", "executionEnvironment")
+  const {ExecutionEnvironment} = digs(Constants, "ExecutionEnvironment")
+  const {Bare, Standalone, StoreClient} = digs(ExecutionEnvironment, "Bare", "Standalone", "StoreClient")
+
+  // True if the app is running in an `expo build` app or if it's running in Expo Go.
+  isExpo = executionEnvironment === Bare || executionEnvironment === Standalone || executionEnvironment === StoreClient
+} catch (error) {
+  // Do nothing - failed to require expo-constants
+}
+
+export default isExpo

package/src/{key-value-store.mjs → key-value-store.js}

@@ -1,4 +1,4 @@
-import Params from "./params.mjs"
+import Params from "./params"
 
 const shared = {}
 

package/src/link.jsx

@@ -1,27 +1,72 @@
+import {Platform, Pressable} from "react-native"
+import BaseComponent from "./base-component"
+import dataSetToAttributes from "./data-set-to-attributes"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
 import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {useApiMaker} from "@kaspernj/api-maker/build/with-api-maker"
+
+export default memo(shapeComponent(class ApiMakerLink extends BaseComponent {
+  static propTypes = {
+    usePressable: PropTypes.bool
+  }
+
+  setup() {
+    this.apiMaker = useApiMaker()
+  }
 
-export default class Link extends React.PureComponent {
   render() {
-    const {to, onClick, ...restProps} = this.props
+    const {dataSet, to, onClick, onPress, usePressable, ...restProps} = this.props
+
+    if (Platform.OS == "web" && !usePressable) {
+      return (
+        <a {...dataSetToAttributes(dataSet)} href={to} {...restProps} onClick={this.tt.onLinkClicked} />
+      )
+    }
 
     return (
-      <a href={to} {...restProps} onClick={this.onLinkClicked} />
+      <Pressable dataSet={dataSet} onPress={this.tt.onPress} {...restProps} />
     )
   }
 
   onLinkClicked = (e, ...restArgs) => {
-    const {onClick} = this.props
+    const {onClick, onPress} = this.props
+
+    if (onClick) {
+      onClick(e, ...restArgs)
+    }
 
-    if (onClick) onClick(e, ...restArgs)
+    if (onPress) {
+      onPress(e, ...restArgs)
+    }
 
     if (!e.defaultPrevented && !e.ctrlKey && !e.metaKey) {
       e.preventDefault()
 
-      const history = globalThis.apiMakerConfigGlobal?.history
+      this.redirect()
+    }
+  }
 
-      if (!history) throw new Error("History hasn't been set in the API maker configuration")
+  onPress = () => {
+    const {onClick, onPress} = this.props
 
-      history.push(this.props.to)
+    if (onClick) {
+      onClick(e, ...restArgs)
     }
+
+    if (onPress) {
+      onPress(e, ...restArgs)
+    }
+
+    this.redirect()
+  }
+
+  redirect = () => {
+    const history = this.apiMaker.config.getHistory()
+
+    if (!history) throw new Error("History hasn't been set in the API maker configuration")
+
+    history.push(this.props.to)
   }
-}
+}))