@kaspernj/api-maker 1.0.216 → 1.0.217

package/src/bootstrap/radio-buttons.jsx

@@ -0,0 +1,87 @@
+import {digs} from "diggerize"
+import inputWrapper from "../inputs/input-wrapper"
+import InvalidFeedback from "./invalid-feedback"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+
+class ApiMakerBootstrapRadioButtons extends React.PureComponent {
+  static propTypes = propTypesExact({
+    attribute: PropTypes.string,
+    collection: PropTypes.array.isRequired,
+    defaultValue: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.string
+    ]),
+    id: PropTypes.string,
+    inputProps: PropTypes.object.isRequired,
+    name: PropTypes.string,
+    model: PropTypes.object,
+    onChange: PropTypes.func,
+    onMatchValidationError: PropTypes.func,
+    wrapperClassName: PropTypes.string,
+    wrapperOpts: PropTypes.object.isRequired
+  })
+
+  render () {
+    return (
+      <div className={this.wrapperClassName()}>
+        <input {...this.props.inputProps} type="hidden" value="" />
+        {this.props.collection.map((option, index) => this.optionElement(option, index))}
+      </div>
+    )
+  }
+
+  inputRadioClassName () {
+    const classNames = ["form-check-input"]
+
+    if (this.props.wrapperOpts.errors.length > 0)
+      classNames.push("is-invalid")
+
+    return classNames.join(" ")
+  }
+
+  generatedId () {
+    return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+  }
+
+  optionElement (option, index) {
+    const {collection} = digs(this.props, "collection")
+    const {onChange} = this.props
+    const id = this.generatedId()
+
+    return (
+      <div className="form-check" key={`option-${option[1]}`}>
+        <input
+          className={this.inputRadioClassName()}
+          data-option-value={option[1]}
+          defaultChecked={option[1] == this.props.inputProps.defaultValue}
+          id={id}
+          name={this.props.inputProps.name}
+          onChange={onChange}
+          type="radio"
+          value={option[1]}
+        />
+
+        <label className="form-check-label" htmlFor={id}>
+          {option[0]}
+        </label>
+
+        {(index + 1) == collection.length && this.props.wrapperOpts.errors.length > 0 &&
+          <InvalidFeedback errors={this.props.wrapperOpts.errors} />
+        }
+      </div>
+    )
+  }
+
+  wrapperClassName () {
+    const classNames = ["component-bootstrap-radio-buttons"]
+
+    if (this.props.wrapperClassName)
+      classNames.push(this.props.wrapperClassName)
+
+    return classNames.join(" ")
+  }
+}
+
+export default inputWrapper(ApiMakerBootstrapRadioButtons)

package/src/bootstrap/select.jsx

@@ -0,0 +1,110 @@
+import {digs} from "diggerize"
+import inputWrapper from "../inputs/input-wrapper"
+import {Select} from "../inputs/select"
+import InvalidFeedback from "./invalid-feedback"
+import PropTypes from "prop-types"
+import React from "react"
+
+class ApiMakerBootstrapSelect extends React.PureComponent {
+  static propTypes = {
+    attribute: PropTypes.string,
+    className: PropTypes.string,
+    description: PropTypes.node,
+    id: PropTypes.string,
+    hint: PropTypes.node,
+    hintBottom: PropTypes.node,
+    inputProps: PropTypes.object.isRequired,
+    label: PropTypes.node,
+    labelContainerClassName: PropTypes.string,
+    model: PropTypes.object,
+    wrapperClassName: PropTypes.string,
+    wrapperOpts: PropTypes.object.isRequired
+  }
+
+  render () {
+    const {
+      children,
+      className,
+      description,
+      id,
+      inputProps,
+      hint,
+      hintBottom,
+      label,
+      labelContainerClassName,
+      name,
+      wrapperClassName,
+      wrapperOpts,
+      ...restProps
+    } = this.props
+    const {ref, ...forwardedInputProps} = inputProps
+    const {errors} = digs(wrapperOpts, "errors")
+
+    return (
+      <div className={this.wrapperClassName()}>
+        {wrapperOpts.label &&
+          <div className={labelContainerClassName ? labelContainerClassName : null}>
+            <label className={this.labelClassName()} htmlFor={inputProps.id}>
+              {wrapperOpts.label}
+            </label>
+          </div>
+        }
+        {description &&
+          <div className="mb-4">
+            {description}
+          </div>
+        }
+        {hint &&
+          <span className="font-smoothing font-xs form-text text-muted">
+            {hint}
+          </span>
+        }
+        {children}
+        {!children &&
+          <Select
+            {...forwardedInputProps}
+            className={this.selectClassName()}
+            inputProps={inputProps}
+            inputRef={ref}
+            wrapperOpts={wrapperOpts}
+            {...restProps}
+          />
+        }
+        {hintBottom &&
+          <span className="form-text text-muted font-smoothing font-xs">
+            {hintBottom}
+          </span>
+        }
+        {errors.length > 0 && <InvalidFeedback errors={errors} />}
+      </div>
+    )
+  }
+
+  labelClassName () {
+    const classNames = ["form-group-label"]
+
+    if (this.props.labelClassName)
+      classNames.push(this.props.labelClassName)
+
+    return classNames.join(" ")
+  }
+
+  selectClassName () {
+    const classNames = ["form-control"]
+
+    if (this.props.className) classNames.push(this.props.className)
+    if (this.props.wrapperOpts.errors.length > 0) classNames.push("is-invalid")
+
+    return classNames.join(" ")
+  }
+
+  wrapperClassName () {
+    const classNames = ["form-group", "component-bootstrap-select"]
+
+    if (this.props.wrapperClassName) classNames.push(this.props.wrapperClassName)
+
+    return classNames.join(" ")
+  }
+}
+
+export default inputWrapper(ApiMakerBootstrapSelect, {type: "select"})

package/src/bootstrap/sort-link.jsx

@@ -0,0 +1,102 @@
+import {digg, digs} from "diggerize"
+import inflection from "inflection"
+import PropTypes from "prop-types"
+import qs from "qs"
+import React from "react"
+
+import Link from "../link"
+import PureComponent from "set-state-compare/src/pure-component"
+import withQueryParams from "on-location-changed/src/with-query-params"
+
+class ApiMakerBootstrapSortLink extends PureComponent {
+  static propTypes = {
+    attribute: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    linkComponent: PropTypes.object,
+    onChanged: PropTypes.func,
+    query: PropTypes.object.isRequired,
+    queryParams: PropTypes.object.isRequired,
+    title: PropTypes.node
+  }
+
+  searchKey = digg(this, "props", "query", "queryArgs").searchKey || "q"
+
+  attribute () {
+    return inflection.underscore(this.props.attribute)
+  }
+
+  href () {
+    const {queryParams} = digs(this.props, "queryParams")
+    const {searchKey} = digs(this, "searchKey")
+
+    if (!queryParams[searchKey]) queryParams[searchKey] = {}
+
+    queryParams[searchKey].s = `${this.attribute()} ${this.sortMode()}` // eslint-disable-line id-length
+
+    const newParams = qs.stringify(queryParams)
+    const newPath = `${location.pathname}?${newParams}`
+
+    return newPath
+  }
+
+  isSortedByAttribute () {
+    const {queryParams} = digs(this.props, "queryParams")
+    const {searchKey} = digs(this, "searchKey")
+    const params = queryParams[searchKey] || {}
+
+    if (params.s == this.attribute()) return true
+    if (params.s == `${this.attribute()} asc`) return true
+
+    return false
+  }
+
+  render () {
+    const LinkComponent = this.linkComponent()
+    const {attribute, className, linkComponent, onChanged, query, queryParams, title, ...restProps} = this.props
+
+    return (
+      <>
+        <LinkComponent
+          className={this.className()}
+          data-attribute={attribute}
+          data-sort-mode={this.sortMode()}
+          to={this.href()}
+          {...restProps}
+        >
+          {this.title()}
+        </LinkComponent>
+      </>
+    )
+  }
+
+  className () {
+    const classNames = ["component-api-maker-bootstrap-sort-link"]
+
+    if (this.props.className) classNames.push(this.props.className)
+
+    return classNames.join(" ")
+  }
+
+  linkComponent () {
+    if (this.props.linkComponent) return this.props.linkComponent
+
+    return Link
+  }
+
+  sortMode () {
+    if (this.isSortedByAttribute()) return "desc"
+
+    return "asc"
+  }
+
+  title () {
+    const {attribute, query} = digs(this.props, "attribute", "query")
+    const {title} = this.props
+
+    if (title) return title
+
+    return query.modelClass().humanAttributeName(attribute)
+  }
+}
+
+export default withQueryParams(ApiMakerBootstrapSortLink)

package/src/collection-loader.jsx

@@ -1,16 +1,15 @@
-import Collection from "@kaspernj/api-maker/src/collection"
+import Collection from "./collection"
 import {debounce} from "debounce"
 import {digg, digs} from "diggerize"
-import EventCreated from "@kaspernj/api-maker/src/event-created"
-import EventDestroyed from "@kaspernj/api-maker/src/event-destroyed"
-import EventUpdated from "@kaspernj/api-maker/src/event-updated"
-import instanceOfClassName from "@kaspernj/api-maker/src/instance-of-class-name"
-import Params from "@kaspernj/api-maker/src/params"
+import EventCreated from "./event-created"
+import EventDestroyed from "./event-destroyed"
+import EventUpdated from "./event-updated"
+import instanceOfClassName from "./instance-of-class-name"
+import {LocationChanged} from "on-location-changed/src/location-changed-component"
+import Params from "./params"
 import PropTypes from "prop-types"
 import React from "react"
 
-import {LocationChanged} from "on-location-changed/src/location-changed-component"
-
 export default class CollectionLoader extends React.PureComponent {
   static defaultProps = {
     destroyEnabled: true,

package/src/inputs/auto-submit.mjs

@@ -0,0 +1,37 @@
+import {digg} from "diggerize"
+import 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.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,97 @@
+import AutoSubmit from "./auto-submit.mjs"
+import {digg, digs} from "diggerize"
+import EventUpdated from "../event-updated"
+import inputWrapper from "./input-wrapper"
+import PropTypes from "prop-types"
+import React from "react"
+
+class ApiMakerInputsCheckbox extends React.PureComponent {
+  static defaultProps = {
+    autoRefresh: false,
+    autoSubmit: false,
+    defaultValue: 1,
+    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
+  }
+
+  render () {
+    const {
+      attribute,
+      autoRefresh,
+      autoSubmit,
+      defaultChecked,
+      defaultValue,
+      id,
+      inputProps,
+      inputRef,
+      model,
+      name,
+      onChange,
+      zeroInput,
+      wrapperOpts,
+      ...restProps
+    } = this.props
+
+    return (
+      <>
+        {autoRefresh && model &&
+          <EventUpdated model={model} onUpdated={digg(this, "onModelUpdated")} />
+        }
+        {zeroInput && inputProps.name &&
+          <input defaultValue="0" name={inputProps.name} type="hidden" />
+        }
+        <input
+          {...inputProps}
+          data-auto-refresh={autoRefresh}
+          data-auto-submit={autoSubmit}
+          defaultValue={defaultValue}
+          onChange={digg(this, "onChanged")}
+          type="checkbox"
+          {...restProps}
+        />
+      </>
+    )
+  }
+
+  onChanged = (...args) => {
+    const {attribute, autoSubmit, model, onChange} = this.props
+
+    if (attribute && autoSubmit && model) new AutoSubmit({component: this}).autoSubmit()
+    if (onChange) onChange(...args)
+  }
+
+  onModelUpdated = (args) => {
+    const inputRef = digg(this, "props", "inputProps", "ref")
+
+    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 currentChecked = digg(inputRef, "current", "checked")
+    const newValue = newModel.readAttribute(attribute)
+
+    if (currentChecked != newValue) {
+      inputRef.current.checked = newValue
+    }
+  }
+}
+
+export {ApiMakerInputsCheckbox as Checkbox}
+export default inputWrapper(ApiMakerInputsCheckbox, {type: "checkbox"})

package/src/inputs/checkboxes.jsx

@@ -0,0 +1,113 @@
+import classNames from "classnames"
+import {digs} from "diggerize"
+import inputWrapper from "./input-wrapper"
+import inflection from "inflection"
+import InvalidFeedback from "../bootstrap/invalid-feedback"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+
+class ApiMakerInputsCheckboxes extends React.PureComponent {
+  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.mjs

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