@kaspernj/api-maker 1.0.2011 → 1.0.2013

package/src/bootstrap/input.jsx

@@ -0,0 +1,173 @@
+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.node,
+    appendText: PropTypes.node,
+    attribute: PropTypes.string,
+    className: PropTypes.string,
+    currenciesCollection: PropTypes.array,
+    currencyName: PropTypes.string,
+    hint: PropTypes.node,
+    hintBottom: PropTypes.node,
+    id: PropTypes.string,
+    label: PropTypes.node,
+    labelClassName: PropTypes.string,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    placeholder: PropTypes.node,
+    prepend: PropTypes.node,
+    prependText: PropTypes.node,
+    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

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

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

@@ -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,106 @@
+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.node
+  }
+
+  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={{marginLeft: 3}} />
+        }
+        {isSortedByAttribute && sortMode == "desc" &&
+          <Icon name="chevron-up" size={14} style={{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)
+  }
+}))