@kaspernj/api-maker 1.0.340 → 1.0.342

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.340",
+  "version": "1.0.342",
   "type": "module",
   "description": "",
   "main": "index.js",

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

@@ -1,6 +1,6 @@
 import * as inflection from "inflection"
 
-export default function apiMakerIdForComponent (component) {
+export default function apiMakerIdForComponent(component) {
   if ("id" in component.props) {
     return component.props.id
   } else if (component.props.attribute && component.props.model) {

package/src/inputs/input-wrapper.jsx

@@ -1,184 +1,15 @@
-import {dig, digg, digs} from "diggerize"
-import EventListener from "../event-listener"
-import React from "react"
-import idForComponent from "./id-for-component.mjs"
-import nameForComponent from "./name-for-component.mjs"
-import strftime from "strftime"
-
-const inputWrapper = (WrapperComponentClass, wrapperOptions = {}) => {
-  return class ApiMakerInputWrapper extends React.PureComponent {
-    state = {
-      errors: [],
-      form: undefined
-    }
-
-    componentDidMount() {
-      this.setForm()
-    }
-
-    componentDidUpdate() {
-      this.setForm()
-    }
-
-    inputProps() {
-      const givenInputProps = this.props.inputProps || {}
-      const inputProps = Object.assign(
-        {
-          id: idForComponent(this),
-          name: nameForComponent(this),
-          ref: this.inputRef()
-        },
-        givenInputProps
-      )
-
-      if (this.handleAsCheckbox()) {
-        if ("checked" in this.props) {
-          inputProps.checked = this.props.checked
-        }
-
-        if ("defaultChecked" in this.props || (this.props.attribute && this.props.model)) {
-          inputProps.defaultChecked = this.inputDefaultChecked()
-        }
-      } else {
-        inputProps.defaultValue = this.inputDefaultValue()
-      }
-
-      return inputProps
-    }
-
-    render() {
-      const {inputProps: oldInputProps, ...restProps} = this.props
-      const {errors, form} = digs(this.state, "errors", "form")
-      const type = this.inputType()
-      const inputProps = this.inputProps()
-
-      if (!inputProps.ref) throw new Error("No input ref?")
-      if (!this.handleAsSelect()) inputProps.type = type
-
-      const wrapperOpts = {
-        errors,
-        form,
-        label: this.label()
-      }
-
-      return (
-        <>
-          {form &&
-            <EventListener event="validation-errors" onCalled={digg(this, "onValidationErrors")} target={form} />
-          }
-          <WrapperComponentClass
-            inputProps={inputProps}
-            wrapperOpts={wrapperOpts}
-            {...restProps}
-          />
-        </>
-      )
-    }
-
-    formatValue (value) {
-      const {formatValue} = 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 (this.inputType() == "datetime-local") {
-          return strftime("%Y-%m-%dT%H:%M:%S", value)
-        } else if (this.inputType() == "date") {
-          return strftime("%Y-%m-%d", value)
-        }
-      }
-
-      return value
-    }
-
-    handleAsCheckbox() {
-      if (this.props.type == "checkbox") return true
-      if (!("type" in this.props) && wrapperOptions.type == "checkbox") return true
-
-      return false
-    }
-
-    handleAsSelect() {
-      if (wrapperOptions.type == "select") return true
-
-      return false
-    }
-
-    inputDefaultChecked () {
-      if ("defaultChecked" in this.props) {
-        return this.props.defaultChecked
-      } else if (this.props.model) {
-        if (!this.props.model[this.props.attribute])
-          throw new Error(`No such attribute: ${this.props.attribute}`)
-
-        return this.props.model[this.props.attribute]()
-      }
-    }
-
-    inputDefaultValue() {
-      if ("defaultValue" in this.props) {
-        return this.formatValue(this.props.defaultValue)
-      } else if (this.props.model) {
-        if (!this.props.model[this.props.attribute]) {
-          throw new Error(`No such attribute defined on resource: ${digg(this.props.model.modelClassData(), "name")}#${this.props.attribute}`)
-        }
-
-        return this.formatValue(this.props.model[this.props.attribute]())
-      }
-    }
-
-    inputName() {
-      if (this.state.blankInputName) return ""
-
-      return nameForComponent(this)
-    }
-
-    inputRefBackup() {
-      if (!this._inputRefBackup) this._inputRefBackup = React.createRef()
-
-      return this._inputRefBackup
-    }
-
-    inputRef = () => this.props.inputRef || this.inputRefBackup()
-
-    inputType() {
-      if ("type" in this.props) {
-        return this.props.type
-      } else if (wrapperOptions.type == "checkbox") {
-        return "checkbox"
-      } else {
-        return "text"
-      }
-    }
-
-    label() {
-      if ("label" in this.props) {
-        return this.props.label
-      } else if (this.props.attribute && this.props.model) {
-        return this.props.model.modelClass().humanAttributeName(this.props.attribute)
-      }
-    }
-
-    onValidationErrors = (event) => {
-      const errors = event.detail.getValidationErrorsForInput({
-        attribute: this.props.attribute,
-        inputName: this.inputName(),
-        onMatchValidationError: this.props.onMatchValidationError
-      })
-
-      this.setState({errors})
-    }
-
-    setForm () {
-      const inputElement = this.inputRef().current
-
-      let form
-
-      if (inputElement) form = dig(inputElement, "form")
-      if (form && form != this.state.form) this.setState({form})
-    }
-  }
+import useInput from "../use-input.mjs"
+
+const inputWrapper = (WrapperComponentClass, wrapperOptions = {}) => (props) => {
+  const {inputProps, restProps, wrapperOpts} = useInput({props, wrapperOptions})
+
+  return (
+    <WrapperComponentClass
+      inputProps={inputProps}
+      wrapperOpts={wrapperOpts}
+      {...restProps}
+    />
+  )
 }
 
 export default inputWrapper

package/src/use-event-listener.mjs

@@ -6,10 +6,12 @@ const ApiMakerUseEventListener = (target, event, onCalled) => {
   }, [target, event, onCalled])
 
   useEffect(() => {
-    target.addEventListener(event, onCalledCallback)
+    if (target) {
+      target.addEventListener(event, onCalledCallback)
 
-    return () => {
-      target.removeEventListener(event, onCalledCallback)
+      return () => {
+        target.removeEventListener(event, onCalledCallback)
+      }
     }
   }, [target, event, onCalled])
 }

package/src/use-input.mjs

@@ -0,0 +1,178 @@
+import {dig, digg, digs} from "diggerize"
+import {useCallback, useEffect, useMemo} from "react"
+import idForComponent from "./inputs/id-for-component.mjs"
+import nameForComponent from "./inputs/name-for-component.mjs"
+import strftime from "strftime"
+import useEventListener from "./use-event-listener.mjs"
+import useShape from "set-state-compare/src/use-shape.js"
+
+const useInput = ({props, wrapperOptions}) => {
+  const s = useShape(props)
+
+  s.useStates({
+    errors: [],
+    form: undefined
+  })
+
+  useEffect(() => {
+    setForm()
+  }, [s.props.inputRef?.current])
+
+  s.meta.fakeComponent = {props}
+
+  const formatValue = useCallback((value) => {
+    const {formatValue} = s.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 (inputType() == "datetime-local") {
+        return strftime("%Y-%m-%dT%H:%M:%S", value)
+      } else if (inputType() == "date") {
+        return strftime("%Y-%m-%d", value)
+      }
+    }
+
+    return value
+  }, [])
+
+  const handleAsCheckbox = useCallback(() => {
+    if (s.props.type == "checkbox") return true
+    if (!("type" in s.props) && wrapperOptions?.type == "checkbox") return true
+
+    return false
+  }, [])
+
+  const handleAsSelect = useCallback(() => {
+    if (wrapperOptions?.type == "select") return true
+
+    return false
+  }, [])
+
+  const inputDefaultChecked = useCallback(() => {
+    if ("defaultChecked" in s.props) {
+      return s.props.defaultChecked
+    } else if (s.props.model) {
+      if (!s.props.model[s.props.attribute])
+        throw new Error(`No such attribute: ${s.props.attribute}`)
+
+      return s.props.model[s.props.attribute]()
+    }
+  }, [])
+
+  const inputDefaultValue = useCallback(() => {
+    if ("defaultValue" in s.props) {
+      return formatValue(s.props.defaultValue)
+    } else if (s.props.model) {
+      if (!s.props.model[s.props.attribute]) {
+        throw new Error(`No such attribute defined on resource: ${digg(s.props.model.modelClassData(), "name")}#${s.props.attribute}`)
+      }
+
+      return formatValue(s.props.model[s.props.attribute]())
+    }
+  }, [])
+
+  const inputName = useCallback(() => {
+    if (s.state.blankInputName) return ""
+
+    return getName()
+  }, [])
+
+  const inputRefBackup = useCallback(() => {
+    if (!s.meta._inputRefBackup) s.meta._inputRefBackup = React.createRef()
+
+    return s.meta._inputRefBackup
+  }, [])
+
+  const inputRef = useCallback(() => s.props.inputRef || inputRefBackup())
+
+  const inputType = useCallback(() => {
+    if ("type" in s.props) {
+      return s.props.type
+    } else if (wrapperOptions?.type == "checkbox") {
+      return "checkbox"
+    } else {
+      return "text"
+    }
+  }, [])
+
+  const label = useCallback(() => {
+    if ("label" in s.props) {
+      return s.props.label
+    } else if (s.props.attribute && s.props.model) {
+      return s.props.model.modelClass().humanAttributeName(s.props.attribute)
+    }
+  }, [])
+
+  const onValidationErrors = useCallback((event) => {
+    const errors = event.detail.getValidationErrorsForInput({
+      attribute: s.props.attribute,
+      inputName: inputName(),
+      onMatchValidationError: s.props.onMatchValidationError
+    })
+
+    s.set({errors})
+  }, [])
+
+  const setForm = useCallback(() => {
+    const inputElement = inputRef().current
+
+    let form
+
+    if (inputElement) form = dig(inputElement, "form")
+    if (form && form != s.s.form) s.set({form})
+  }, [])
+
+  const getId = useCallback(() => idForComponent(s.m.fakeComponent), [])
+  const getName = useCallback(() => nameForComponent(s.m.fakeComponent), [])
+
+  const getInputProps = useCallback(() => {
+    const givenInputProps = s.props.inputProps || {}
+    const inputProps = Object.assign(
+      {
+        id: getId(),
+        name: getName(),
+        ref: inputRef()
+      },
+      givenInputProps
+    )
+
+    if (handleAsCheckbox()) {
+      if ("checked" in s.props) {
+        inputProps.checked = s.props.checked
+      }
+
+      if ("defaultChecked" in s.props || (s.props.attribute && s.props.model)) {
+        inputProps.defaultChecked = inputDefaultChecked()
+      }
+    } else {
+      inputProps.defaultValue = inputDefaultValue()
+    }
+
+    return inputProps
+  }, [])
+
+  const {inputProps: oldInputProps, ...restProps} = props
+  const type = inputType()
+  const inputProps = getInputProps()
+
+  if (!inputProps.ref) throw new Error("No input ref?")
+  if (!handleAsSelect()) inputProps.type = type
+
+  const wrapperOpts = {
+    errors: s.s.errors,
+    form: s.s.form,
+    label: label()
+  }
+
+  useEventListener(s.s.form, "validation-errors", onValidationErrors)
+
+  return {
+    inputProps,
+    wrapperOpts,
+    restProps
+  }
+}
+
+export default useInput