@kaspernj/api-maker 1.0.2053 → 1.0.2054

package/src/bootstrap/input.jsx

@@ -1,173 +0,0 @@
-import {digs} from "diggerize"
-import inputWrapper from "../inputs/input-wrapper"
-import {Input} from "../inputs/input"
-import InvalidFeedback from "./invalid-feedback"
-import memo from "set-state-compare/src/memo"
-import Money from "../inputs/money"
-import PropTypes from "prop-types"
-import React from "react"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
-
-const ApiMakerBootstrapInput = memo(shapeComponent(class ApiMakerBootstrapInput extends ShapeComponent {
-  static propTypes = {
-    append: PropTypes.any,
-    appendText: PropTypes.any,
-    attribute: PropTypes.string,
-    className: PropTypes.string,
-    currenciesCollection: PropTypes.array,
-    currencyName: PropTypes.string,
-    hint: PropTypes.any,
-    hintBottom: PropTypes.any,
-    id: PropTypes.string,
-    label: PropTypes.any,
-    labelClassName: PropTypes.string,
-    model: PropTypes.object,
-    name: PropTypes.string,
-    placeholder: PropTypes.any,
-    prepend: PropTypes.any,
-    prependText: PropTypes.any,
-    small: PropTypes.bool,
-    type: PropTypes.string,
-    wrapperClassName: PropTypes.string
-  }
-
-  render () {
-    const {
-      append,
-      appendText,
-      attribute,
-      className,
-      currenciesCollection,
-      currencyName,
-      hint,
-      hintBottom,
-      id,
-      inputClassName,
-      inputProps,
-      inputRef,
-      label,
-      labelClassName,
-      model,
-      name,
-      prepend,
-      prependText,
-      type,
-      wrapperClassName,
-      wrapperOpts,
-      ...restProps
-    } = this.props
-    const {ref, ...forwardedInputProps} = inputProps
-    const {errors} = digs(wrapperOpts, "errors")
-
-    return (
-      <div className={this.wrapperClassName()} ref={this.props.wrapperRef}>
-        {wrapperOpts.label &&
-          <label className={this.labelClassName()} htmlFor={inputProps.id}>
-            {wrapperOpts.label}
-          </label>
-        }
-        {hint &&
-          <span className="form-text text-muted font-smoothing font-xs">
-            {hint}
-          </span>
-        }
-        {type == "money" &&
-          <Money
-            name={inputProps.name}
-            className={this.inputClassName()}
-            ref={this.props.moneyRef}
-            {...this.moneyProps()}
-          />
-        }
-        {type != "money" &&
-          <div className="input-group">
-            {(prepend || prependText) &&
-              <div className="input-group-prepend">
-                {prependText &&
-                  <span className="input-group-text">
-                    {prependText}
-                  </span>
-                }
-                {prepend}
-              </div>
-            }
-            <Input
-              attribute={attribute}
-              className={this.inputClassName()}
-              inputProps={inputProps}
-              model={model}
-              wrapperOpts={wrapperOpts}
-              {...forwardedInputProps}
-              {...restProps}
-            />
-            {(append || appendText) &&
-              <div className="input-group-append">
-                {appendText &&
-                  <span className="input-group-text">
-                    {appendText}
-                  </span>
-                }
-                {append}
-              </div>
-            }
-            {errors.length > 0 && <InvalidFeedback errors={errors} />}
-          </div>
-        }
-        {hintBottom &&
-          <span className="form-text text-muted font-smoothing font-xs">
-            {hintBottom}
-          </span>
-        }
-      </div>
-    )
-  }
-
-  inputClassName () {
-    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(" ")
-  }
-
-  labelClassName () {
-    const classNames = []
-
-    if (this.props.labelClassName)
-      classNames.push(this.props.labelClassName)
-
-    return classNames.join(" ")
-  }
-
-  moneyProps() {
-    const moneyProps = {}
-    const forwardedProps = ["attribute", "currenciesCollection", "currencyName", "model", "onChange", "placeholder", "small"]
-
-    for (const forwardedProp of forwardedProps) {
-      if (forwardedProp in this.props) moneyProps[forwardedProp] = this.props[forwardedProp]
-    }
-
-    const forwardedInputProps = ["defaultValue"]
-
-    for (const forwardedInputProp of forwardedInputProps) {
-      if (forwardedInputProp in this.props.inputProps) moneyProps[forwardedInputProp] = this.props.inputProps[forwardedInputProp]
-    }
-
-    return moneyProps
-  }
-
-  wrapperClassName () {
-    const classNames = ["form-group", "component-bootstrap-string-input"]
-
-    if (this.props.wrapperClassName)
-      classNames.push(this.props.wrapperClassName)
-
-    return classNames.join(" ")
-  }
-}))
-
-export default inputWrapper(ApiMakerBootstrapInput)

package/src/bootstrap/invalid-feedback.jsx

@@ -1,31 +0,0 @@
-import {digs} from "diggerize"
-import PropTypes from "prop-types"
-import propTypesExact from "prop-types-exact"
-import React from "react"
-
-export default class ApiMakerBootstrapInvalidFeedback extends React.PureComponent {
-  static propTypes = propTypesExact({
-    errors: PropTypes.array.isRequired
-  })
-
-  render () {
-    return (
-      <div className="invalid-feedback">
-        {this.errorMessages().join(". ")}
-      </div>
-    )
-  }
-
-  errorMessages () {
-    const {errors} = digs(this.props, "errors")
-    const errorMessages = []
-
-    for (const error of errors) {
-      for (const errorMessage of error.getErrorMessages()) {
-        errorMessages.push(errorMessage)
-      }
-    }
-
-    return errorMessages
-  }
-}

package/src/bootstrap/paginate.jsx

@@ -1,187 +0,0 @@
-import BaseComponent from "../base-component"
-import instanceOfClassName from "../instance-of-class-name"
-import Link from "../link"
-import PropTypes from "prop-types"
-import propTypesExact from "prop-types-exact"
-import memo from "set-state-compare/src/memo"
-import qs from "qs"
-import React, {useMemo} from "react"
-import Text from "../utils/text"
-import Result from "../result"
-import {shapeComponent} from "set-state-compare/src/shape-component"
-import urlEncode from "../url-encode"
-
-export default memo(shapeComponent(class ApiMakerBootstrapPaginate extends BaseComponent {
-  static propTypes = propTypesExact({
-    result: PropTypes.oneOfType([
-      instanceOfClassName("ApiMakerResult"),
-      PropTypes.instanceOf(Result)
-    ]).isRequired
-  })
-
-  setup() {
-    const {result} = this.p
-
-    this.totalPages = useMemo(
-      () => Math.ceil(result.count() / result.perPage()),
-      [result.count(), result.perPage()]
-    )
-    this.pages = useMemo(
-      () => this.calculatePages(),
-      [result.currentPage(), this.totalPages]
-    )
-  }
-
-  calculatePages () {
-    const {result} = this.p
-    const {totalPages} = this.tt
-    const currentPage = result.currentPage()
-    const pages = []
-
-    let pagesFrom = currentPage - 5
-    let pagesTo = currentPage + 5
-
-    if (pagesFrom < 1) {
-      pagesFrom = 1
-    }
-
-    if (pagesTo > totalPages) {
-      pagesTo = totalPages
-    }
-
-    for (let i = pagesFrom; i <= pagesTo; i++) {
-      pages.push(i)
-    }
-
-    return pages
-  }
-
-  isPageActiveClass = (pageNumber) => this.p.result.currentPage() == pageNumber ? "active" : "not-active"
-
-  pagePath (pageNumber) {
-    let pageKey = this.p.result.data.collection.queryArgs.pageKey
-
-    if (!pageKey) {
-      pageKey = "page"
-    }
-
-    const currentParams = qs.parse(globalThis.location.search.substr(1))
-    currentParams[pageKey] = pageNumber
-    const newParams = qs.stringify(currentParams, {encoder: urlEncode})
-    const newPath = `${location.pathname}?${newParams}`
-
-    return newPath
-  }
-
-  previousPagePath () {
-    const {result} = this.p
-    let previousPage
-
-    if (result.currentPage() > 1) {
-      previousPage = result.currentPage() - 1
-    } else {
-      previousPage = result.currentPage()
-    }
-
-    return this.pagePath(previousPage)
-  }
-
-  nextPagePath () {
-    const {result} = this.p
-    let nextPage
-
-    if (result.currentPage() < this.tt.totalPages) {
-      nextPage = result.currentPage() + 1
-    } else {
-      nextPage = result.currentPage()
-    }
-
-    return this.pagePath(nextPage)
-  }
-
-  showBackwardsDots = () => (this.p.result.currentPage() - 5 > 1)
-  showForwardsDots = () => (this.p.result.currentPage() + 5 < this.tt.totalPages)
-
-  render () {
-    const {result} = this.p
-    const {pages, totalPages} = this.tt
-    const showNextPage = result.currentPage() < totalPages
-    const showLastPage = result.currentPage() < totalPages
-    const showPreviousPage = result.currentPage() > 1
-    const showFirstPage = result.currentPage() > 1
-
-    return (
-      <>
-        <ul className="pagination" data-pages-length={pages.length}>
-          <li className={`page-item ${!showPreviousPage ? "disabled" : ""}`} key="page-first">
-            {!showPreviousPage &&
-              <Text>⇤</Text>
-            }
-            {showPreviousPage &&
-              <Link dataSet={{class: "page-link"}} to={this.pagePath(1)}>
-                <Text>⇤</Text>
-              </Link>
-            }
-          </li>
-          <li className={`page-item ${!showFirstPage ? "disabled" : ""}`} key="page-previous">
-            {!showFirstPage &&
-              <Text>←</Text>
-            }
-            {showFirstPage &&
-              <Link dataSet={{class: "page-link"}} to={this.previousPagePath()}>
-                <Text>←</Text>
-              </Link>
-            }
-          </li>
-          {this.showBackwardsDots() &&
-            <li className="page-item disabled">
-              &hellip;
-            </li>
-          }
-          {pages.map((page) =>
-            <li
-              className={`page-item ${this.isPageActiveClass(page)}`}
-              data-active={this.isPageActiveClass(page) == "active"}
-              data-page={page}
-              key={`page-${page}`}
-            >
-              {this.isPageActiveClass(page) == "active" &&
-                page
-              }
-              {this.isPageActiveClass(page) == "not-active" &&
-                <Link dataSet={{class: "page-link"}} to={this.pagePath(page)}>
-                  <Text>{page}</Text>
-                </Link>
-              }
-            </li>
-          )}
-          {this.showForwardsDots() &&
-            <li className="page-item disabled">
-              &hellip;
-            </li>
-          }
-          <li className={`page-item ${!showNextPage ? "disabled" : ""}`} key="page-next">
-            {!showNextPage &&
-              <Text>→</Text>
-            }
-            {showNextPage &&
-              <Link dataSet={{class: "page-link"}} to={this.nextPagePath()}>
-                <Text>→</Text>
-              </Link>
-            }
-          </li>
-          <li className={`page-item ${!showLastPage ? "disabled" : ""}`} key="page-last">
-            {!showLastPage &&
-              <Text>⇥</Text>
-            }
-            {showLastPage &&
-              <Link dataSet={{class: "page-link"}} to={this.pagePath(totalPages)}>
-                <Text>⇥</Text>
-              </Link>
-            }
-          </li>
-        </ul>
-      </>
-    )
-  }
-}))

package/src/bootstrap/radio-buttons.jsx

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

@@ -1,110 +0,0 @@
-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.any,
-    id: PropTypes.string,
-    hint: PropTypes.any,
-    hintBottom: PropTypes.any,
-    inputProps: PropTypes.object.isRequired,
-    label: PropTypes.any,
-    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

@@ -1,106 +0,0 @@
-import BaseComponent from "../base-component"
-import * as inflection from "inflection"
-import Icon from "../utils/icon"
-import PropTypes from "prop-types"
-import qs from "qs"
-import memo from "set-state-compare/src/memo"
-import React from "react"
-import Text from "../utils/text"
-import {shapeComponent} from "set-state-compare/src/shape-component"
-import urlEncode from "../url-encode"
-import useSorting from "../table/use-sorting"
-
-import Link from "../link"
-import useQueryParams from "on-location-changed/build/use-query-params"
-
-export default memo(shapeComponent(class ApiMakerBootstrapSortLink extends BaseComponent {
-  static propTypes = {
-    attribute: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    defaultParams: PropTypes.object,
-    linkComponent: PropTypes.object,
-    onChanged: PropTypes.func,
-    query: PropTypes.object.isRequired,
-    title: PropTypes.any
-  }
-
-  setup() {
-    const {attribute, defaultParams, query} = this.props
-    const {qParams, searchKey, sortAttribute, sortMode} = useSorting({defaultParams, query})
-
-    this.setInstance({
-      isSortedByAttribute: sortAttribute == attribute,
-      qParams,
-      searchKey,
-      sortMode
-    })
-
-    this.queryParams = useQueryParams()
-    this.searchKey = this.p.query.queryArgs.searchKey || "q"
-    this.attribute = inflection.underscore(this.p.attribute)
-  }
-
-  href () {
-    const qParams = Object.assign({}, this.tt.qParams)
-    const {attribute, queryParams, searchKey, sortMode} = this.tt
-    const newQueryParams = {...queryParams}
-
-    qParams.s = `${attribute} ${sortMode == "asc" ? "desc" : "asc"}` // eslint-disable-line id-length
-
-    newQueryParams[searchKey] = JSON.stringify(qParams)
-
-    const newParams = qs.stringify(newQueryParams, {encoder: urlEncode})
-    const newPath = `${location.pathname}?${newParams}`
-
-    return newPath
-  }
-
-  render () {
-    const {isSortedByAttribute, sortMode} = this.tt
-    const LinkComponent = this.linkComponent()
-    const {attribute, className, dataSet, defaultParams, linkComponent, onChanged, query, style, textProps, title, ...restProps} = this.props
-    const actualDataSet = Object.assign(
-      {
-        attribute,
-        class: className,
-        component: "api-maker/bootstrap/sort-link",
-        sortMode: this.tt.sortMode
-      },
-      dataSet
-    )
-    const actualStyle = Object.assign(
-      {display: "flex", flexDirection: "row", alignItems: "center"},
-      style
-    )
-
-    return (
-      <LinkComponent
-        dataSet={actualDataSet}
-        style={actualStyle}
-        to={this.href()}
-        {...restProps}
-      >
-        <Text {...textProps}>
-          {this.title()}
-        </Text>
-        {isSortedByAttribute && sortMode == "asc" &&
-          <Icon name="chevron-down" size={14} style={this.downIconStyle ||= {marginLeft: 3}} />
-        }
-        {isSortedByAttribute && sortMode == "desc" &&
-          <Icon name="chevron-up" size={14} style={this.upIconStyle ||= {marginLeft: 3}} />
-        }
-      </LinkComponent>
-    )
-  }
-
-  linkComponent = () => this.props.linkComponent || Link
-
-  title () {
-    const {attribute, query} = this.p
-    const {title} = this.props
-
-    if (title) return title
-
-    return query.modelClass().humanAttributeName(attribute)
-  }
-}))