@kaspernj/api-maker 1.0.2053 → 1.0.2055

package/src/bootstrap/attribute-row.jsx

@@ -1,134 +0,0 @@
-import React, {useMemo} from "react"
-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.any,
-    identifier: PropTypes.string,
-    label: PropTypes.oneOfType([PropTypes.any, PropTypes.string]),
-    model: PropTypes.object,
-    value: PropTypes.any
-  }
-
-  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={this.labelTextDataSet ||= {class: "attribute-row-label"}} style={this.labelTextStyle ||= {fontWeight: "bold"}}>
-          {this.label()}
-        </Text>
-        <View dataSet={this.valueViewDataSet ||= {class: "attribute-row-value"}} style={this.valueViewStyle ||= {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

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

@@ -1,149 +0,0 @@
-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.any,
-    controls: PropTypes.any,
-    defaultExpanded: PropTypes.bool.isRequired,
-    expandable: PropTypes.bool.isRequired,
-    expandableHide: PropTypes.bool.isRequired,
-    footer: PropTypes.any,
-    header: PropTypes.any,
-    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

@@ -1,86 +0,0 @@
-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.any,
-    hint: PropTypes.any,
-    id: PropTypes.string,
-    label: PropTypes.any,
-    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

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