@kaspernj/api-maker 1.0.2011 → 1.0.2012

package/src/bootstrap/attribute-row.jsx

@@ -0,0 +1,135 @@
+import React, {useMemo} from "react"
+import classNames from "classnames"
+import {digg} from "diggerize"
+import * as inflection from "inflection"
+import memo from "set-state-compare/src/memo"
+import MoneyFormatter from "../money-formatter"
+import PropTypes from "prop-types"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import strftime from "strftime"
+import Text from "../utils/text"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+import {View} from "react-native"
+
+export default memo(shapeComponent(class ApiMakerBootstrapAttributeRow extends ShapeComponent {
+  static defaultProps = {
+    checkIfAttributeLoaded: false
+  }
+
+  static propTypes = {
+    attribute: PropTypes.string,
+    checkIfAttributeLoaded: PropTypes.bool.isRequired,
+    children: PropTypes.node,
+    identifier: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    model: PropTypes.object,
+    value: PropTypes.node
+  }
+
+  setup() {
+    const {l, t} = useI18n({namespace: "js.api_maker.attribute_row"})
+
+    this.l = l
+    this.t = t
+    this.attribute = useMemo(
+      () => {
+        if (this.props.attribute) {
+          return this.props.model?.constructor?.attributes()?.find((attribute) => attribute.name() == inflection.underscore(this.props.attribute))
+        }
+      },
+      [this.props.attribute, this.props.model]
+    )
+  }
+
+  render () {
+    const {attribute, checkIfAttributeLoaded, children, className, identifier, label, model, style, value, ...restProps} = this.props
+    const actualStyle = Object.assign(
+      {
+        paddingVertical: 8
+      },
+      style
+    )
+
+    return (
+      <View
+        dataSet={{
+          attribute,
+          class: className,
+          component: "api-maker/attribute-row",
+          identifier
+        }}
+        style={actualStyle}
+        {...restProps}
+      >
+        <Text dataSet={{class: "attribute-row-label"}} style={{fontWeight: "bold"}}>
+          {this.label()}
+        </Text>
+        <View dataSet={{class: "attribute-row-value"}} style={{marginTop: 3}}>
+          {this.value()}
+        </View>
+      </View>
+    )
+  }
+
+  label() {
+    const {attribute, label, model} = this.props
+
+    if ("label" in this.props) return label
+    if (attribute && model) return model.constructor.humanAttributeName(attribute)
+
+    throw new Error("Couldn't figure out label")
+  }
+
+  value() {
+    const {attribute, checkIfAttributeLoaded, children, model} = this.props
+
+    if (children) return children
+
+    if (attribute && !(attribute in model))
+      throw new Error(`Attribute not found: ${digg(model.modelClassData(), "name")}#${attribute}`)
+
+    if (attribute && checkIfAttributeLoaded && !model.isAttributeLoaded(attribute))
+      return null
+
+    if (attribute && model) {
+      const value = model[attribute]()
+
+      return this.valueContent(value)
+    }
+  }
+
+  valueContent(value) {
+    const {l, t} = this.tt
+    const columnType = this.attribute?.getColumn()?.getType()
+
+    if (columnType == "date") {
+      return (
+        <Text>{l("date.formats.default", value)}</Text>
+      )
+    } else if (value instanceof Date) {
+      return (
+        <Text>{strftime("%Y-%m-%d %H:%M", value)}</Text>
+      )
+    } else if (typeof value === "boolean") {
+      if (value) {
+        return (
+          <Text>{t("js.shared.yes", {defaultValue: "Yes"})}</Text>
+        )
+      }
+
+      return (
+        <Text>{t("js.shared.no", {defaultValue: "No"})}</Text>
+      )
+    } else if (MoneyFormatter.isMoney(value)) {
+      return (
+        <Text>{MoneyFormatter.format(value)}</Text>
+      )
+    } else if (typeof value == "string") {
+      return (
+        <Text>{value}</Text>
+      )
+    } else {
+      return value
+    }
+  }
+}))

package/src/bootstrap/attribute-rows.jsx

@@ -0,0 +1,27 @@
+import AttributeRow from "./attribute-row"
+import BaseComponent from "../base-component"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class ApiMakerBootstrapAttributeRows extends BaseComponent {
+  static defaultProps = {
+    checkIfAttributeLoaded: false
+  }
+
+  static propTypes = propTypesExact({
+    attributes: PropTypes.array.isRequired,
+    checkIfAttributeLoaded: PropTypes.bool.isRequired,
+    model: PropTypes.object.isRequired
+  })
+
+  render () {
+    const {attributes, checkIfAttributeLoaded, model} = this.p
+
+    return attributes.map((attribute) =>
+      <AttributeRow attribute={attribute} checkIfAttributeLoaded={checkIfAttributeLoaded} key={`attribute-${attribute}`} model={model} />
+    )
+  }
+}))

package/src/bootstrap/card.jsx

@@ -0,0 +1,149 @@
+import BaseComponent from "../base-component"
+import classNames from "classnames"
+import {digg, digs} from "diggerize"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import React, {useRef} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class ApiMakerBootstrapCard extends BaseComponent {
+  static defaultProps = {
+    defaultExpanded: true,
+    expandable: false,
+    expandableHide: false,
+    responsiveTable: true,
+    table: false
+  }
+
+  static propTypes = {
+    cardRef: PropTypes.object,
+    className: PropTypes.string,
+    children: PropTypes.node,
+    controls: PropTypes.node,
+    defaultExpanded: PropTypes.bool.isRequired,
+    expandable: PropTypes.bool.isRequired,
+    expandableHide: PropTypes.bool.isRequired,
+    footer: PropTypes.node,
+    header: PropTypes.node,
+    striped: PropTypes.bool,
+    responsiveTable: PropTypes.bool.isRequired,
+    table: PropTypes.bool.isRequired
+  }
+
+  setup() {
+    this.cardRef = useRef()
+
+    this.useStates({
+      expanded: this.props.defaultExpanded
+    })
+  }
+
+  render () {
+    const {
+      cardRef,
+      children,
+      className,
+      controls,
+      defaultExpanded,
+      expandable,
+      expandableHide,
+      footer,
+      header,
+      responsiveTable,
+      striped,
+      table,
+      ...restProps
+    } = this.props
+    const {expanded} = digs(this.state, "expanded")
+    const cardHeaderStyle = {display: "flex"}
+    const cardRefToUse = cardRef || this.cardRef
+
+    if (!expanded) cardHeaderStyle["borderBottom"] = "0"
+
+    return (
+      <div
+        className={classNames("component-bootstrap-card", "card", "card-default", className)}
+        data-has-footer={Boolean(footer)}
+        ref={cardRefToUse}
+        {...restProps}
+      >
+        {(controls || expandable || header) &&
+          <div className="card-header" style={cardHeaderStyle}>
+            <div className="card-header-label" style={{alignSelf: "center", marginRight: "auto"}}>
+              {header}
+            </div>
+            {(controls || expandable) &&
+              <div className="card-header-actions" style={{alignSelf: "center"}}>
+                {controls}
+                {expandable && expanded &&
+                  <a className="collapse-card-button text-muted" href="#" onClick={digg(this, "onCollapseClicked")}>
+                    <i className="fa fa-angle-up" />
+                  </a>
+                }
+                {expandable && !expanded &&
+                  <a className="expand-card-button text-muted" href="#" onClick={digg(this, "onExpandClicked")}>
+                    <i className="fa fa-angle-down" />
+                  </a>
+                }
+              </div>
+            }
+          </div>
+        }
+        {(expanded || expandableHide) &&
+          <div className={this.bodyClassNames()}>
+            {table &&
+              <table className={this.tableClassNames()}>
+                {children}
+              </table>
+            }
+            {!table && children}
+          </div>
+        }
+        {footer &&
+          <div className="card-footer">
+            {footer}
+          </div>
+        }
+      </div>
+    )
+  }
+
+  bodyClassNames () {
+    const {expandableHide, responsiveTable, table} = digs(this.props, "expandableHide", "responsiveTable", "table")
+    const {expanded} = digs(this.state, "expanded")
+    const classNames = ["card-body"]
+
+    if (!expanded && expandableHide) {
+      classNames.push("d-none")
+    }
+
+    if (table) {
+      if (responsiveTable){
+        classNames.push("table-responsive")
+      }
+
+      classNames.push("p-0")
+    }
+
+    return classNames.join(" ")
+  }
+
+  onCollapseClicked = (e) => {
+    e.preventDefault()
+    this.setState({expanded: false})
+  }
+
+  onExpandClicked = (e) => {
+    e.preventDefault()
+    this.setState({expanded: true})
+  }
+
+  tableClassNames () {
+    const classNames = ["table", "table-hover", "mb-0", "w-100"]
+
+    if (this.props.striped)
+      classNames.push("table-striped")
+
+    return classNames.join(" ")
+  }
+}))

package/src/bootstrap/checkbox.jsx

@@ -0,0 +1,86 @@
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import Checkbox from "../inputs/checkbox"
+import classNames from "classnames"
+import {digs} from "diggerize"
+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"
+
+export default memo(shapeComponent(class ApiMakerBootstrapCheckbox extends ShapeComponent {
+  static defaultProps = {
+    defaultValue: 1,
+    zeroInput: true
+  }
+
+  static propTypes = {
+    attribute: PropTypes.string,
+    className: PropTypes.string,
+    defaultChecked: PropTypes.bool,
+    defaultValue: PropTypes.node,
+    hint: PropTypes.node,
+    id: PropTypes.string,
+    label: PropTypes.node,
+    labelClassName: PropTypes.string,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    wrapperClassName: PropTypes.string,
+    zeroInput: PropTypes.bool
+  }
+
+  setup() {
+    const {inputProps, restProps: useInputRestProps, wrapperOpts} = useInput({props: this.props, wrapperOptions: {type: "checkbox"}})
+
+    this.setInstance({inputProps, useInputRestProps, wrapperOpts})
+  }
+
+  render () {
+    const {inputProps, useInputRestProps, wrapperOpts} = this.tt
+    const {className, hint, id, inputRef, label, labelClassName, wrapperClassName, ...restProps} = useInputRestProps
+    const {errors} = digs(wrapperOpts, "errors")
+
+    return (
+      <div className={this.wrapperClassName()}>
+        <div className="form-check">
+          <Checkbox
+            className={classNames("form-check-input", className, {"is-invalid": errors.length > 0})}
+            id={id}
+            inputRef={inputRef}
+            {...restProps}
+          />
+          {wrapperOpts.label &&
+            <label className={this.labelClassName()} htmlFor={inputProps.id}>
+              {wrapperOpts.label}
+            </label>
+          }
+          {hint &&
+            <p className="text-muted">
+              {hint}
+            </p>
+          }
+          {errors.length > 0 && <InvalidFeedback errors={errors} />}
+        </div>
+      </div>
+    )
+  }
+
+  labelClassName () {
+    const classNames = ["form-check-label"]
+
+    if (this.props.labelClassName)
+      classNames.push(this.props.labelClassName)
+
+    return classNames.join(" ")
+  }
+
+  wrapperClassName () {
+    const classNames = ["component-bootstrap-checkbox", "form-group"]
+
+    if (this.props.wrapperClassName)
+      classNames.push(this.props.wrapperClassName)
+
+    return classNames.join(" ")
+  }
+}))

package/src/bootstrap/checkboxes.jsx

@@ -0,0 +1,185 @@
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+import React, {useMemo} from "react"
+import {digs} from "diggerize"
+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 useInput from "../use-input"
+
+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,
+    label: PropTypes.string,
+    labelClassName: PropTypes.string,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    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.tt.wrapperOpts.label}
+        </label>
+
+        <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>
+    )
+  }
+
+  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.tt.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
+    }
+  }
+
+  labelClassName () {
+    const classNames = []
+
+    if (this.props.labelClassName) classNames.push(this.props.labelClassName)
+
+    return classNames.join(" ")
+  }
+
+  onOptionChecked = ({event, option}) => {
+    const {inputProps, form} = this.tt
+    const {name} = inputProps
+    const checked = event.target.checked
+    let newOptions
+
+    if (checked) {
+      newOptions = this.s.checkedOptions.concat([option[1]])
+
+      this.setState({checkedOptions: newOptions})
+    } else {
+      newOptions = this.s.checkedOptions.filter((value) => value != option[1])
+
+      this.setState({checkedOptions: newOptions})
+    }
+
+    if (form && name) {
+      form.setValue(name, newOptions)
+    }
+  }
+}))