@kaspernj/api-maker 1.0.441 → 1.0.442

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.441",
+  "version": "1.0.442",
   "type": "module",
   "description": "",
   "main": "index.js",

package/src/bootstrap/checkbox.jsx

@@ -1,12 +1,14 @@
-import {Checkbox} from "../inputs/checkbox"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
+import Checkbox from "../inputs/checkbox"
 import classNames from "classnames"
 import {digs} from "diggerize"
-import inputWrapper from "../inputs/input-wrapper"
 import InvalidFeedback from "./invalid-feedback"
+import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import React from "react"
+import useInput from "../use-input"
 
-class ApiMakerBootstrapCheckbox extends React.PureComponent {
+export default memo(shapeComponent(class ApiMakerBootstrapCheckbox extends ShapeComponent {
   static defaultProps = {
     defaultValue: 1,
     zeroInput: true
@@ -28,8 +30,15 @@ class ApiMakerBootstrapCheckbox extends React.PureComponent {
     zeroInput: PropTypes.bool
   }
 
+  setup() {
+    const {inputProps, restProps: useInputRestProps, wrapperOpts} = useInput({props: this.props, wrapperOptions: {type: "checkbox"}})
+
+    this.setInstance({inputProps, useInputRestProps, wrapperOpts})
+  }
+
   render () {
-    const {className, hint, id, inputProps, inputRef, label, labelClassName, wrapperClassName, wrapperOpts, ...restProps} = this.props
+    const {inputProps, useInputRestProps, wrapperOpts} = this.tt
+    const {className, hint, id, inputRef, label, labelClassName, wrapperClassName, ...restProps} = useInputRestProps
     const {errors} = digs(wrapperOpts, "errors")
 
     return (
@@ -37,8 +46,8 @@ class ApiMakerBootstrapCheckbox extends React.PureComponent {
         <div className="form-check">
           <Checkbox
             className={classNames("form-check-input", className, {"is-invalid": errors.length > 0})}
-            inputProps={inputProps}
-            wrapperOpts={wrapperOpts}
+            id={id}
+            inputRef={inputRef}
             {...restProps}
           />
           {wrapperOpts.label &&
@@ -74,6 +83,4 @@ class ApiMakerBootstrapCheckbox extends React.PureComponent {
 
     return classNames.join(" ")
   }
-}
-
-export default inputWrapper(ApiMakerBootstrapCheckbox, {type: "checkbox"})
+}))

package/src/bootstrap/checkboxes.jsx

@@ -1,34 +1,115 @@
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import {digs} from "diggerize"
-import inputWrapper from "../inputs/input-wrapper"
+import {useForm} from "../form"
 import * as inflection from "inflection"
 import InvalidFeedback from "./invalid-feedback"
+import memo from "set-state-compare/src/memo"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
-import React from "react"
+import useInput from "../use-input"
+import {useMemo} from "react"
 
-class ApiMakerBootstrapCheckboxes extends React.PureComponent {
+const OptionElement = memo(shapeComponent(class OptionElement extends ShapeComponent {
+  render() {
+    const {generatedId, inputCheckboxClassName, isDefaultSelected, inputName, option, optionIndex, options, wrapperOpts} = this.p
+    const {errors} = digs(wrapperOpts, "errors")
+    const id = `${generatedId}-${optionIndex}`
+
+    return (
+      <div className="checkboxes-option" key={`option-${option[1]}`}>
+        <input
+          className={inputCheckboxClassName}
+          data-option-value={option[1]}
+          defaultChecked={isDefaultSelected}
+          id={id}
+          name={inputName}
+          onChange={this.tt.onChange}
+          type="checkbox"
+          value={option[1]}
+        />
+
+        <label className="ml-1" htmlFor={id}>
+          {option[0]}
+        </label>
+
+        {(optionIndex + 1) == options.length && errors.length > 0 &&
+          <InvalidFeedback errors={errors} />
+        }
+      </div>
+    )
+  }
+
+  onChange = (event, ...restProps) => {
+    this.p.onOptionChecked({event, option: this.p.option})
+
+    if (this.props.onChange) this.props.onChange(event, ...restProps)
+  }
+}))
+
+export default memo(shapeComponent(class ApiMakerBootstrapCheckboxes extends ShapeComponent {
   static propTypes = propTypesExact({
     attribute: PropTypes.string,
     defaultValue: PropTypes.array,
-    inputProps: PropTypes.object.isRequired,
     label: PropTypes.string,
     labelClassName: PropTypes.string,
     model: PropTypes.object,
     name: PropTypes.string,
     onChange: PropTypes.func,
-    options: PropTypes.array.isRequired,
-    wrapperOpts: PropTypes.object.isRequired
+    options: PropTypes.array.isRequired
   })
 
+  setup() {
+    const {inputProps, wrapperOpts} = useInput({props: this.props})
+
+    this.generatedId = useMemo(
+      () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
+      []
+    )
+
+    this.setInstance({
+      form: useForm(),
+      inputProps,
+      wrapperOpts
+    })
+    this.useStates({
+      checkedOptions: () => {
+        if (Array.isArray(this.props.defaultValue)) return this.props.defaultValue
+        if (this.props.defaultValue) return [this.props.defaultValue]
+
+        return []
+      }
+    })
+
+    useMemo(() => {
+      if (this.form && inputProps.name) {
+        this.form.setValue(inputProps.name, this.s.checkedOptions)
+      }
+    }, [])
+  }
+
   render () {
     return (
       <div className="component-bootstrap-checkboxes form-group">
         <label className={this.labelClassName()}>
-          {this.props.wrapperOpts.label}
+          {this.tt.wrapperOpts.label}
         </label>
 
-        <input name={this.inputName()} ref={this.props.inputProps.ref} type="hidden" value="" />
-        {this.props.options.map((option, index) => this.optionElement(option, index))}
+        <input name={this.inputName()} ref={this.tt.inputProps.ref} type="hidden" value="" />
+        {this.props.options.map((option, index) =>
+          <OptionElement
+            inputCheckboxClassName={this.tt.inputCheckboxClassName()}
+            inputName={this.inputName()}
+            isDefaultSelected={this.isDefaultSelected(option[1])}
+            generatedId={this.tt.generatedId}
+            key={option[1]}
+            onChange={this.props.onChange}
+            onOptionChecked={this.tt.onOptionChecked}
+            option={option}
+            optionIndex={index}
+            options={this.props.options}
+            wrapperOpts={this.tt.wrapperOpts}
+          />
+        )}
       </div>
     )
   }
@@ -39,8 +120,7 @@ class ApiMakerBootstrapCheckboxes extends React.PureComponent {
     if (defaultValue) {
       return defaultValue
     } else if (attribute && model) {
-      if (!model[attribute])
-        throw `No such attribute: ${attribute}`
+      if (!model[attribute]) throw `No such attribute: ${attribute}`
 
       return this.props.model[attribute]()
     }
@@ -49,7 +129,7 @@ class ApiMakerBootstrapCheckboxes extends React.PureComponent {
   inputCheckboxClassName () {
     const classNames = []
 
-    if (this.props.wrapperOpts.errors.length > 0) classNames.push("is-invalid")
+    if (this.tt.wrapperOpts.errors.length > 0) classNames.push("is-invalid")
 
     return classNames.join(" ")
   }
@@ -82,41 +162,24 @@ class ApiMakerBootstrapCheckboxes extends React.PureComponent {
     return classNames.join(" ")
   }
 
-  generatedId () {
-    if (!this.generatedIdValue)
-      this.generatedIdValue = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+  onOptionChecked = ({event, option}) => {
+    const {inputProps, form} = this.tt
+    const {name} = inputProps
+    const checked = event.target.checked
+    let newOptions
 
-    return this.generatedIdValue
-  }
+    if (checked) {
+      newOptions = this.s.checkedOptions.concat([option[1]])
 
-  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]}
-        />
+      this.setState({checkedOptions: newOptions})
+    } else {
+      newOptions = this.s.checkedOptions.filter((value) => value != option[1])
 
-        <label className="ml-1" htmlFor={id}>
-          {option[0]}
-        </label>
+      this.setState({checkedOptions: newOptions})
+    }
 
-        {(index + 1) == options.length && errors.length > 0 &&
-          <InvalidFeedback errors={errors} />
-        }
-      </div>
-    )
+    if (form && name) {
+      form.setValue(name, newOptions)
+    }
   }
-}
-
-export default inputWrapper(ApiMakerBootstrapCheckboxes)
+}))

package/src/inputs/attachment.jsx

@@ -1,6 +1,6 @@
 import BaseComponent from "../base-component"
 import {Input as ApiMakerInput} from "@kaspernj/api-maker/src/inputs/input"
-import {Checkbox} from "./checkbox"
+import Checkbox from "./checkbox"
 import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
 
@@ -13,16 +13,19 @@ export default memo(shapeComponent(class ApiMakerInputsAttachment extends BaseCo
   }
 
   setup() {
+    const {inputProps} = useInput({props: this.props})
+
+    this.setInstance({inputProps})
     this.useStates({
       purgeChecked: false
     })
   }
 
   render() {
-    const {attribute, checkboxComponent, className, inputProps, label, model, name, onPurgeChanged, purgeName, wrapperOpts, ...restProps} = this.props
+    const {inputProps} = this.tt
+    const {attribute, checkboxComponent, className, label, model, name, onPurgeChanged, purgeName, wrapperOpts, ...restProps} = this.props
     const CheckboxComponent = checkboxComponent || Checkbox
-
-    inputProps.type = "file"
+    const newInputProps = Object.assign({}, inputProps, {type: "file"})
 
     return (
       <div className={classNames("api-maker--inputs--attachment", "components--inputs--input", className)} {...restProps}>
@@ -33,16 +36,16 @@ export default memo(shapeComponent(class ApiMakerInputsAttachment extends BaseCo
         }
         {this.getUrl() &&
           <div className="input-checkbox" style={{paddingTop: "15px", paddingBottom: "15px"}}>
-            <CheckboxComponent inputProps={{id: this.getPurgeInputId(), name: this.getPurgeInputName()}} onChange={this.props.onPurgeChanged} />
+            <CheckboxComponent id={this.getPurgeInputId()} name={this.getPurgeInputName()} onChange={this.props.onPurgeChanged} />
             <label className="checkbox-label" htmlFor={this.getPurgeInputId()}>
               {I18n.t("js.shared.delete")}
             </label>
           </div>
         }
-        {!this.state.purgeChecked &&
+        {!this.s.purgeChecked &&
           <ApiMakerInput
             defaultValue={null}
-            inputProps={inputProps}
+            inputProps={newInputProps}
             model={model}
           />
         }

package/src/inputs/auto-submit.mjs

@@ -17,7 +17,7 @@ export default class ApiMakerInputsAutoSubmit {
   }
 
   value () {
-    const inputRef = this.component.props.inputRef || this.component.props.inputProps.ref || this.component.inputRef
+    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") {

package/src/inputs/checkbox.jsx

@@ -1,14 +1,14 @@
 import AutoSubmit from "./auto-submit.mjs"
 import BaseComponent from "../base-component"
-import {digg, digs} from "diggerize"
+import {digg} from "diggerize"
 import EventUpdated from "../event-updated"
-import inputWrapper from "./input-wrapper"
 import PropTypes from "prop-types"
 import memo from "set-state-compare/src/memo"
 import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import useInput from "../use-input"
 import {useForm} from "../form"
 
-const ApiMakerInputsCheckbox = memo(shapeComponent(class ApiMakerInputsCheckbox extends BaseComponent {
+export default memo(shapeComponent(class ApiMakerInputsCheckbox extends BaseComponent {
   static defaultProps = {
     autoRefresh: false,
     autoSubmit: false,
@@ -32,10 +32,17 @@ const ApiMakerInputsCheckbox = memo(shapeComponent(class ApiMakerInputsCheckbox
   }
 
   setup() {
-    this.form = useForm()
+    const {inputProps, restProps: useInputRestProps} = useInput({props: this.props, wrapperOptions: {type: "checkbox"}})
+
+    this.setInstance({
+      form: useForm(),
+      inputProps,
+      useInputRestProps
+    })
   }
 
   render () {
+    const {inputProps, useInputRestProps} = this.tt
     const {
       attribute,
       autoRefresh,
@@ -44,20 +51,20 @@ const ApiMakerInputsCheckbox = memo(shapeComponent(class ApiMakerInputsCheckbox
       defaultChecked,
       defaultValue,
       id,
-      inputProps,
       inputRef,
       model,
       name,
       onChange,
       zeroInput,
-      wrapperOpts,
       ...restProps
-    } = this.props
+    } = useInputRestProps
+
+    console.log("ApiMakerInputsCheckbox", {inputProps, restProps})
 
     return (
       <>
         {autoRefresh && model &&
-          <EventUpdated model={model} onUpdated={digg(this, "onModelUpdated")} />
+          <EventUpdated model={model} onUpdated={this.tt.onModelUpdated} />
         }
         {zeroInput && inputProps.name &&
           <input defaultValue="0" name={inputProps.name} type="hidden" />
@@ -67,7 +74,7 @@ const ApiMakerInputsCheckbox = memo(shapeComponent(class ApiMakerInputsCheckbox
           data-auto-refresh={autoRefresh}
           data-auto-submit={autoSubmit}
           defaultValue={defaultValue}
-          onChange={digg(this, "onChanged")}
+          onChange={this.tt.onChanged}
           type="checkbox"
           {...restProps}
         />
@@ -85,14 +92,14 @@ const ApiMakerInputsCheckbox = memo(shapeComponent(class ApiMakerInputsCheckbox
   }
 
   onModelUpdated = (args) => {
-    const inputRef = digg(this, "props", "inputProps", "ref")
+    const inputRef = digg(this.tt.inputProps, "ref")
 
     if (!inputRef.current) {
       // This can happen if the component is being unmounted
       return
     }
 
-    const {attribute} = digs(this.props, "attribute")
+    const {attribute} = this.p
     const newModel = digg(args, "model")
     const currentChecked = digg(inputRef, "current", "checked")
     const newValue = newModel.readAttribute(attribute)
@@ -102,6 +109,3 @@ const ApiMakerInputsCheckbox = memo(shapeComponent(class ApiMakerInputsCheckbox
     }
   }
 }))
-
-export {ApiMakerInputsCheckbox as Checkbox}
-export default inputWrapper(ApiMakerInputsCheckbox, {type: "checkbox"})

package/src/params.mjs

@@ -5,11 +5,11 @@ import qs from "qs"
 import urlEncode from "./url-encode.mjs"
 
 export default class Params {
-  static parse () {
+  static parse() {
     return qs.parse(globalThis.location.search.substr(1))
   }
 
-  static change (given) {
+  static change(given) {
     const incorporator = new Incorporator({objects: [Params.parse(), given]})
 
     incorporator.replaceArrayIfExists(true)
@@ -17,14 +17,14 @@ export default class Params {
     return incorporator.merge()
   }
 
-  static withParams (params) {
+  static withParams(params) {
     const newParams = qs.stringify(params, {encoder: urlEncode})
     const newPath = `${location.pathname}?${newParams}`
 
     return newPath
   }
 
-  static changeParams (given, opts = {}) {
+  static changeParams(given, opts = {}) {
     const params = Params.change(given)
     const newParams = qs.stringify(params, {encoder: urlEncode})
     const newPath = `${location.pathname}?${newParams}`
@@ -33,13 +33,13 @@ export default class Params {
     appHistory.push(newPath)
   }
 
-  static serializeForm (form) {
+  static serializeForm(form) {
     const hash = formSerialize(form, {empty: true, hash: true})
     return Params.setUndefined(hash)
   }
 
   // This is used to set all empty values to 'undefined' which makes qs removed those elements from the query string
-  static setUndefined (given) {
+  static setUndefined(given) {
     if (Array.isArray(given)) {
       if (given.length == 0)
         return undefined

package/src/table/table.jsx

@@ -536,7 +536,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const {qParams} = digs(this.collection, "qParams")
 
     return (
-      <Form className="live-table--filter-form" formRef={filterFormRef} onSubmit={this.onFilterFormSubmit} setForm={this.setStates.filterForm}>
+      <Form className="live-table--filter-form" formRef={filterFormRef} onSubmit={this.tt.onFilterFormSubmit} setForm={this.setStates.filterForm}>
         {"s" in qParams &&
           <input name="s" type="hidden" value={qParams.s} />
         }
@@ -853,9 +853,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   onSettingsClicked = (e) => {
     e.preventDefault()
 
-    const {showSettings} = this.s
-
-    this.setState({showSettings: !showSettings})
+    this.setState({showSettings: !this.s.showSettings})
   }
 
   submitFilter = () => {

package/src/use-input.mjs

@@ -18,6 +18,8 @@ const useInput = ({props, wrapperOptions}) => {
   }, [s.props.inputRef?.current])
 
   s.meta.fakeComponent = {props}
+  s.meta.isCheckbox = props.type == "checkbox" || wrapperOptions?.type == "checkbox"
+  s.meta.isSelect = wrapperOptions?.type == "select"
 
   const formatValue = useCallback((value) => {
     const {formatValue} = s.props
@@ -36,19 +38,6 @@ const useInput = ({props, wrapperOptions}) => {
     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
@@ -82,8 +71,10 @@ const useInput = ({props, wrapperOptions}) => {
 
   const inputType = useCallback(() => {
     if ("type" in s.props) {
+      console.log("Type in props", s.p.type)
+
       return s.props.type
-    } else if (wrapperOptions?.type == "checkbox") {
+    } else if (s.m.isCheckbox) {
       return "checkbox"
     } else {
       return "text"
@@ -121,7 +112,7 @@ const useInput = ({props, wrapperOptions}) => {
       givenInputProps
     )
 
-    if (handleAsCheckbox()) {
+    if (s.m.isCheckbox) {
       if ("checked" in s.props) {
         inputProps.checked = s.props.checked
       }
@@ -138,14 +129,14 @@ const useInput = ({props, wrapperOptions}) => {
     return inputProps
   }, [])
 
-  const {inputProps: oldInputProps, ...restProps} = props
+  const {inputProps: oldInputProps, wrapperOpts: oldWrapperOpts, ...restProps} = props
   const type = inputType()
 
   s.meta.inputProps = getInputProps()
   s.meta.inputNameWithoutId = useMemo(() => s.m.inputProps.name?.replace(/\[(.+)_id\]$/, "[$1]"), [s.m.inputProps.name])
 
   if (!s.m.inputProps.ref) throw new Error("No input ref?")
-  if (!handleAsSelect()) s.m.inputProps.type = type
+  if (!s.m.isSelect) s.m.inputProps.type = type
 
   const {validationErrors} = useValidationErrors((validationError) =>
     validationError.inputName == s.m.inputProps.name || validationError.inputName == s.m.inputNameWithoutId