@kaspernj/api-maker 1.0.2011 → 1.0.2012

package/src/flash-message.js

@@ -0,0 +1,70 @@
+import CustomError from "@kaspernj/api-maker/build/custom-error"
+import I18nOnSteroids from "i18n-on-steroids"
+import ValidationError from "@kaspernj/api-maker/build/validation-error"
+import {digg} from "diggerize"
+
+export default class FlashMessage {
+  static alert(message) {
+    new FlashMessage({type: "alert", message})
+  }
+
+  static error(message) {
+    new FlashMessage({type: "error", message})
+  }
+
+  static errorResponse(error) {
+    if (error instanceof ValidationError) {
+      if (error.hasUnhandledErrors()) {
+        FlashMessage.error(error.message)
+      } else {
+        FlashMessage.error(I18nOnSteroids.getCurrent().t("js.flash_message.couldnt_submit_because_of_validation_errors"))
+      }
+    } else if (error instanceof CustomError) {
+      const errors = error.args.response.errors
+      const errorMessages = errors
+        .map((error) => {
+          if (typeof error == "string") {
+            return error
+          }
+
+          return digg(error, "message")
+        })
+      const errorMessage = errorMessages.join(". ")
+
+      FlashMessage.error(errorMessage)
+    } else {
+      console.error("Didnt know what to do with this", error)
+    }
+  }
+
+  static success(message) {
+    new FlashMessage({type: "success", message})
+  }
+
+  constructor({message, type}) {
+    if (!message) throw new Error("No message given")
+    if (!type) throw new Error("No type given")
+
+    let title
+
+    if (type == "alert") {
+      title = I18nOnSteroids.getCurrent().t("js.flash_message.alert", {defaultValue: "Alert"})
+    } else if (type == "error") {
+      title = I18nOnSteroids.getCurrent().t("js.flash_message.error", {defaultValue: "Error"})
+    } else if (type == "success") {
+      title = I18nOnSteroids.getCurrent().t("js.flash_message.success", {defaultValue: "Success"})
+    } else {
+      title = I18nOnSteroids.getCurrent().t("js.flash_message.notification", {defaultValue: "Notification"})
+    }
+
+    const event = new CustomEvent("pushNotification", {
+      detail: {
+        message,
+        title,
+        type
+      }
+    })
+
+    globalThis.dispatchEvent(event)
+  }
+}

package/src/form.jsx

@@ -0,0 +1,91 @@
+import React, {createContext, useContext, useMemo} from "react"
+import BaseComponent from "./base-component"
+import FormDataObjectizer from "form-data-objectizer"
+import memo from "set-state-compare/src/memo"
+import {Platform} from "react-native"
+import PropTypes from "prop-types"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+
+const FormContext = createContext(null)
+const useForm = () => useContext(FormContext)
+
+class FormInputs {
+  constructor(props) {
+    this.inputs = {}
+    this.onSubmit = props?.onSubmit
+  }
+
+  asObject() {
+    const result = {}
+    const formDataObjectizer = new FormDataObjectizer()
+
+    for(const key in this.inputs) {
+      const value = this.inputs[key]
+
+      formDataObjectizer.treatInitial(key, value, result)
+    }
+
+    return result
+  }
+
+  setValue(name, value) {
+    if (!name) throw new Error("'name' is required")
+
+    this.inputs[name] = value
+  }
+
+  setValueWithHidden(name, value) {
+    this.setValue(name, value)
+
+    if (Platform.OS == "web") {
+      return <input name={name} type="hidden" value={value !== null && value !== undefined ? value : ""} />
+    }
+  }
+
+  submit() {
+    if (this.onSubmit) {
+      this.onSubmit()
+    }
+  }
+}
+
+const Form = memo(shapeComponent(class Form extends BaseComponent {
+  static propTypes = {
+    children: PropTypes.node,
+    formRef: PropTypes.object,
+    onSubmit: PropTypes.func,
+    setForm: PropTypes.func
+  }
+
+  render() {
+    const {children, formRef, onSubmit, setForm, ...restProps} = this.props
+    const form = useMemo(() => new FormInputs({onSubmit}), [])
+
+    useMemo(() => {
+      if (setForm) {
+        setForm(form)
+      }
+    }, [setForm])
+
+    return (
+      <FormContext.Provider value={form}>
+        {Platform.OS == "web" &&
+          <form ref={formRef} onSubmit={this.tt.onFormSubmit} {...restProps}>
+            {children}
+          </form>
+        }
+        {Platform.OS != "web" && this.props.children}
+      </FormContext.Provider>
+    )
+  }
+
+  onFormSubmit = (e) => {
+    e.preventDefault()
+
+    if (this.props.onSubmit) {
+      this.props.onSubmit()
+    }
+  }
+}))
+
+export {Form, FormContext, FormInputs, useForm}

package/src/history-expo.js

@@ -0,0 +1,23 @@
+import parse from "url-parse"
+import qs from "qs"
+
+class HistoryExpo {
+  push(path, ...params) {
+    const url = parse(path, {})
+    const actualParams = Object.assign({}, params)
+
+    if (url.query) {
+      Object.assign(actualParams, qs.parse(url.query.slice(1, url.query.length)))
+
+      url.set("query", null)
+    }
+
+    const actualPath = url.href
+
+    router.push({pathname: actualPath, params: actualParams})
+  }
+}
+
+const historyExpo = new HistoryExpo()
+
+export default historyExpo

package/src/history-react-native.js

@@ -0,0 +1,25 @@
+import Config from "./config"
+import parse from "url-parse"
+import qs from "qs"
+
+class HistoryReactNative {
+  push(path, ...params) {
+    const url = parse(path, {})
+
+    if (url.query) {
+      const actualParams = Object.assign({}, params)
+
+      Object.assign(actualParams, qs.parse(url.query.slice(1, url.query.length)))
+
+      url.set("query", qs.stringify(actualParams))
+    }
+
+    const {linkTo} = Config.getLinkTo()
+
+    linkTo(url.href)
+  }
+}
+
+const historyReactNative = new HistoryReactNative()
+
+export default historyReactNative

package/src/history.js

@@ -0,0 +1,3 @@
+import {createBrowserHistory} from "history"
+
+export default createBrowserHistory()

package/src/index.js

@@ -0,0 +1,3 @@
+const stub = "Hello World"
+
+export {stub}

package/src/inputs/attachment.jsx

@@ -0,0 +1,108 @@
+import BaseComponent from "../base-component"
+import classNames from "classnames"
+import {Input as ApiMakerInput} from "@kaspernj/api-maker/build/inputs/input"
+import Checkbox from "./checkbox"
+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 useI18n from "i18n-on-steroids/src/use-i18n"
+import useInput from "../use-input"
+
+export default memo(shapeComponent(class ApiMakerInputsAttachment extends BaseComponent {
+  static propTypes = {
+    className: PropTypes.string,
+    model: PropTypes.object.isRequired,
+    onPurgeChanged: PropTypes.func,
+    purgeName: PropTypes.string
+  }
+
+  setup() {
+    const {t} = useI18n({namespace: "js.api_maker.inputs.attachment"})
+    const {inputProps} = useInput({props: this.props})
+
+    this.setInstance({inputProps, t})
+    this.useStates({
+      purgeChecked: false
+    })
+  }
+
+  render() {
+    const {inputProps, t} = this.tt
+    const {attribute, checkboxComponent, className, label, model, name, onPurgeChanged, purgeName, wrapperOpts, ...restProps} = this.props
+    const CheckboxComponent = checkboxComponent || Checkbox
+    const newInputProps = Object.assign({}, inputProps, {type: "file"})
+
+    return (
+      <div className={classNames("api-maker--inputs--attachment", "components--inputs--input", className)} {...restProps}>
+        {this.isImage() &&
+          <a href={this.getUrl()} target="_blank">
+            <img src={this.getUrl()} style={{maxWidth: "200px", maxHeight: "200px"}} />
+          </a>
+        }
+        {this.getUrl() &&
+          <div className="input-checkbox" style={{paddingTop: "15px", paddingBottom: "15px"}}>
+            <CheckboxComponent id={this.getPurgeInputId()} name={this.getPurgeInputName()} onChange={this.props.onPurgeChanged} />
+            <label className="checkbox-label" htmlFor={this.getPurgeInputId()}>
+              {t("js.shared.delete")}
+            </label>
+          </div>
+        }
+        {!this.s.purgeChecked &&
+          <ApiMakerInput
+            defaultValue={null}
+            inputProps={newInputProps}
+            model={model}
+          />
+        }
+      </div>
+    )
+  }
+
+  getContentType() {
+    const {attribute, model} = this.p
+    const attributeName = `${attribute}ContentType`
+
+    if (!(attributeName in model)) throw new Error(`No such method on ${model.modelClassData().name}: ${attributeName}`)
+
+    return model[attributeName]()
+  }
+
+  getPurgeInputId() {
+    const {inputProps} = this.tt
+
+    return `${inputProps.id}_purge`
+  }
+
+  getPurgeInputName() {
+    if ("purgeName" in this.props) return this.props.purgeName
+
+    const {inputProps} = this.tt
+
+    if (!inputProps.name) return null
+
+    const match = inputProps.name.match(/^(.+)\[(.+?)\]$/)
+    const purgeInputName = `${match[1]}[${match[2]}_purge]`
+
+    return purgeInputName
+  }
+
+  getUrl() {
+    const {attribute, model} = this.p
+    const attributeName = `${attribute}Url`
+
+    if (!(attributeName in model)) throw new Error(`No such method on ${model.modelClassData().name}: ${attributeName}`)
+
+    return model[attributeName]()
+  }
+
+  isImage() {
+    return this.getContentType()?.startsWith("image/")
+  }
+
+  onPurgeChanged = (e) => {
+    this.setState({purgeChecked: digg(e, "target", "checked")})
+
+    if (this.props.onPurgeChanged) this.props.onPurgeChanged(e)
+  }
+}))

package/src/inputs/auto-submit.js

@@ -0,0 +1,37 @@
+import {digg} from "diggerize"
+import * as inflection from "inflection"
+
+export default class ApiMakerInputsAutoSubmit {
+  constructor ({component}) {
+    this.component = component
+  }
+
+  autoSubmit () {
+    const {attribute, model} = this.component.props
+    const updateAttributeName = inflection.underscore(attribute)
+    const updateParams = {}
+
+    updateParams[updateAttributeName] = this.value()
+
+    model.update(updateParams)
+  }
+
+  value () {
+    const inputRef = this.component.props.inputRef || this.component.props.inputProps?.ref || this.component.inputProps?.ref || this.component.inputRef
+    const input = digg(inputRef, "current")
+
+    if (input.type == "checkbox") {
+      if (input.checked) {
+        if (input.value !== undefined) {
+          return input.value
+        } else {
+          return 1
+        }
+      } else {
+        return 0
+      }
+    }
+
+    return digg(input, "value")
+  }
+}

package/src/inputs/checkbox.jsx

@@ -0,0 +1,125 @@
+import React, {useMemo} from "react"
+import AutoSubmit from "./auto-submit"
+import BaseComponent from "../base-component"
+import {digg} from "diggerize"
+import PropTypes from "prop-types"
+import memo from "set-state-compare/src/memo"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import useInput from "../use-input"
+import {useForm} from "../form"
+import useUpdatedEvent from "../use-updated-event"
+
+export default memo(shapeComponent(class ApiMakerInputsCheckbox extends BaseComponent {
+  static defaultProps = {
+    autoRefresh: false,
+    autoSubmit: false,
+    defaultValue: 1,
+    model: null,
+    zeroInput: true
+  }
+
+  static propTypes = {
+    attribute: PropTypes.string,
+    autoRefresh: PropTypes.bool.isRequired,
+    autoSubmit: PropTypes.bool.isRequired,
+    defaultChecked: PropTypes.bool,
+    defaultValue: PropTypes.node,
+    id: PropTypes.string,
+    inputRef: PropTypes.object,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onErrors: PropTypes.func,
+    onMatchValidationError: PropTypes.func,
+    zeroInput: PropTypes.bool
+  }
+
+  setup() {
+    const {autoRefresh, model} = this.p
+    const {inputProps, restProps: useInputRestProps} = useInput({props: this.props, wrapperOptions: {type: "checkbox"}})
+    const {defaultValue, name} = inputProps
+
+    this.setInstance({
+      form: useForm(),
+      inputProps,
+      useInputRestProps
+    })
+
+    useMemo(() => {
+      if (name) {
+        this.tt.form?.setValue(name, defaultValue)
+      }
+    }, [])
+
+    useUpdatedEvent(model, this.tt.onModelUpdated, {active: Boolean(autoRefresh && model)})
+  }
+
+  render () {
+    const {inputProps, useInputRestProps} = this.tt
+    const {
+      attribute,
+      autoRefresh,
+      autoSubmit,
+      checked,
+      defaultChecked,
+      defaultValue,
+      id,
+      inputRef,
+      model,
+      name,
+      onChange,
+      zeroInput,
+      ...restProps
+    } = useInputRestProps
+
+    return (
+      <>
+        {zeroInput && inputProps.name &&
+          <input defaultValue="0" name={inputProps.name} type="hidden" />
+        }
+        <input
+          {...inputProps}
+          data-auto-refresh={autoRefresh}
+          data-auto-submit={autoSubmit}
+          defaultValue={defaultValue}
+          onChange={this.tt.onChanged}
+          type="checkbox"
+          {...restProps}
+        />
+      </>
+    )
+  }
+
+  onChanged = (...args) => {
+    const {form, inputProps} = this.tt
+    const {attribute, autoSubmit, model, onChange} = this.props
+    const {name} = inputProps
+
+    if (attribute && autoSubmit && model) new AutoSubmit({component: this}).autoSubmit()
+
+    if (form && name) {
+      const checked = args[0].target.checked
+
+      form.setValue(name, checked)
+    }
+
+    if (onChange) onChange(...args)
+  }
+
+  onModelUpdated = (args) => {
+    const inputRef = digg(this.tt.inputProps, "ref")
+
+    if (!inputRef.current) {
+      // This can happen if the component is being unmounted
+      return
+    }
+
+    const {attribute} = this.p
+    const newModel = digg(args, "model")
+    const currentChecked = digg(inputRef, "current", "checked")
+    const newValue = newModel.readAttribute(attribute)
+
+    if (currentChecked != newValue) {
+      inputRef.current.checked = newValue
+    }
+  }
+}))

package/src/inputs/checkboxes.jsx

@@ -0,0 +1,116 @@
+import BaseComponent from "../base-component"
+import classNames from "classnames"
+import {digs} from "diggerize"
+import inputWrapper from "./input-wrapper"
+import * as inflection from "inflection"
+import InvalidFeedback from "../bootstrap/invalid-feedback"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+import memo from "set-state-compare/src/memo"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+
+const ApiMakerInputsCheckboxes = memo(shapeComponent(class ApiMakerInputsCheckboxes extends BaseComponent {
+  static propTypes = propTypesExact({
+    attribute: PropTypes.string,
+    defaultValue: PropTypes.array,
+    id: PropTypes.string,
+    inputProps: PropTypes.object.isRequired,
+    label: PropTypes.node,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    options: PropTypes.array.isRequired,
+    wrapperOpts: PropTypes.object
+  })
+
+  render () {
+    const {className, inputProps, label, wrapperOpts, ...restProps} = this.props
+
+    return (
+      <div className={classNames("component-bootstrap-check-boxes", className)} {...restProps}>
+        <input name={this.inputName()} ref={this.props.inputProps.ref} type="hidden" value="" />
+        {this.props.options.map((option, index) => this.optionElement(option, index))}
+      </div>
+    )
+  }
+
+  inputDefaultValue () {
+    const {attribute, defaultValue, model} = this.props
+
+    if (defaultValue) {
+      return defaultValue
+    } else if (attribute && model) {
+      if (!model[attribute])
+        throw `No such attribute: ${attribute}`
+
+      return this.props.model[attribute]()
+    }
+  }
+
+  inputCheckboxClassName () {
+    const classNames = []
+
+    if (this.props.wrapperOpts.errors.length > 0) classNames.push("is-invalid")
+
+    return classNames.join(" ")
+  }
+
+  inputName () {
+    if (this.props.name) {
+      return `${this.props.name}[]`
+    } else if (this.props.model) {
+      return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}]`
+    }
+  }
+
+  isDefaultSelected (option) {
+    let defaultValue = this.inputDefaultValue()
+
+    if (!defaultValue) return false
+
+    if (defaultValue.constructor === Array) {
+      return defaultValue.includes(option)
+    } else {
+      return defaultValue == option
+    }
+  }
+
+  generatedId () {
+    if (!this.generatedIdValue)
+      this.generatedIdValue = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+
+    return this.generatedIdValue
+  }
+
+  optionElement (option, index) {
+    const {onChange, options, wrapperOpts} = this.props
+    const {errors} = digs(wrapperOpts, "errors")
+    const id = `${this.generatedId()}-${index}`
+
+    return (
+      <div className="checkboxes-option" key={`option-${option[1]}`}>
+        <input
+          className={this.inputCheckboxClassName()}
+          data-option-value={option[1]}
+          defaultChecked={this.isDefaultSelected(option[1])}
+          id={id}
+          name={this.inputName()}
+          onChange={onChange}
+          type="checkbox"
+          value={option[1]}
+        />
+
+        <label className="ml-1" htmlFor={id}>
+          {option[0]}
+        </label>
+
+        {(index + 1) == options.length && errors.length > 0 &&
+          <InvalidFeedback errors={errors} />
+        }
+      </div>
+    )
+  }
+}))
+
+export default inputWrapper(ApiMakerInputsCheckboxes)

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

@@ -0,0 +1,15 @@
+import * as inflection from "inflection"
+
+export default function apiMakerIdForComponent(component) {
+  if ("id" in component.props) {
+    return component.props.id
+  } else if (component.props.attribute && component.props.model) {
+    return `${component.props.model.modelClassData().paramKey}_${inflection.underscore(component.props.attribute)}`
+  } else if (component.generatedInputId) {
+    return component.generatedInputId
+  } else {
+    const generatedInputId = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+    component.generatedInputId = generatedInputId
+    return generatedInputId
+  }
+}

package/src/inputs/input-wrapper.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+import useInput from "../use-input"
+
+const inputWrapper = (WrapperComponentClass, wrapperOptions = {}) => (props) => {
+  const {inputProps, restProps, wrapperOpts} = useInput({props, wrapperOptions})
+
+  return (
+    <WrapperComponentClass
+      inputProps={inputProps}
+      wrapperOpts={wrapperOpts}
+      {...restProps}
+    />
+  )
+}
+
+export default inputWrapper