@kaspernj/api-maker 1.0.2052 → 1.0.2054

package/src/inputs/checkbox.jsx

@@ -1,125 +0,0 @@
-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.any,
-    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

@@ -1,116 +0,0 @@
-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.any,
-    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

@@ -1,15 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

package/src/inputs/input.jsx

@@ -1,260 +0,0 @@
-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)