@kaspernj/api-maker 1.0.353 → 1.0.354

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.353",
+  "version": "1.0.354",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -52,10 +52,11 @@
     "on-location-changed": ">= 1.0.10",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
-    "set-state-compare": ">= 1.0.30",
+    "set-state-compare": ">= 1.0.38",
     "spark-md5": "^3.0.2",
     "strftime": ">= 0.10.0",
     "uniqunize": "^1.0.1",
+    "use-did-mount": "^1.0.3",
     "wake-event": ">= 0.0.1"
   },
   "peerDependencies": {

package/src/bootstrap/input.jsx

@@ -5,8 +5,9 @@ import InvalidFeedback from "./invalid-feedback"
 import Money from "../inputs/money"
 import PropTypes from "prop-types"
 import React from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 
-class ApiMakerBootstrapInput extends React.PureComponent {
+const ApiMakerBootstrapInput = shapeComponent(class ApiMakerBootstrapInput extends ShapeComponent {
   static propTypes = {
     append: PropTypes.node,
     appendText: PropTypes.node,
@@ -58,7 +59,7 @@ class ApiMakerBootstrapInput extends React.PureComponent {
     const {errors} = digs(wrapperOpts, "errors")
 
     return (
-      <div className={this.wrapperClassName()} ref="wrapper">
+      <div className={this.wrapperClassName()} ref={this.props.wrapperRef}>
         {wrapperOpts.label &&
           <label className={this.labelClassName()} htmlFor={inputProps.id}>
             {wrapperOpts.label}
@@ -73,7 +74,7 @@ class ApiMakerBootstrapInput extends React.PureComponent {
           <Money
             name={inputProps.name}
             className={this.inputClassName()}
-            ref="money"
+            ref={this.props.moneyRef}
             {...this.moneyProps()}
           />
         }
@@ -166,6 +167,6 @@ class ApiMakerBootstrapInput extends React.PureComponent {
 
     return classNames.join(" ")
   }
-}
+})
 
 export default inputWrapper(ApiMakerBootstrapInput)

package/src/inputs/input.jsx

@@ -4,11 +4,12 @@ import EventUpdated from "../event-updated"
 import inputWrapper from "./input-wrapper"
 import Money from "./money"
 import PropTypes from "prop-types"
-import React from "react"
+import React, {useRef} from "react"
 import replaceall from "replaceall"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 import strftime from "strftime"
 
-class ApiMakerInputsInput extends React.PureComponent {
+const ApiMakerInputsInput = shapeComponent(class ApiMakerInputsInput extends ShapeComponent {
   static defaultProps = {
     autoRefresh: false,
     autoSubmit: false,
@@ -30,9 +31,12 @@ class ApiMakerInputsInput extends React.PureComponent {
     type: PropTypes.string
   }
 
-  visibleInputRef = React.createRef()
-  state = {
-    blankInputName: digg(this, "props", "inputProps", "type") == "file"
+  setup() {
+    this.visibleInputRef = useRef()
+
+    this.useStates({
+      blankInputName: digg(this, "props", "inputProps", "type") == "file"
+    })
   }
 
   render () {
@@ -132,9 +136,7 @@ class ApiMakerInputsInput extends React.PureComponent {
     return value
   }
 
-  autoSubmit = () => {
-    new AutoSubmit({component: this}).autoSubmit()
-  }
+  autoSubmit = () => new AutoSubmit({component: this}).autoSubmit()
 
   formatValue (value) {
     const {formatValue, type} = this.props
@@ -180,9 +182,7 @@ class ApiMakerInputsInput extends React.PureComponent {
     return this.props.inputProps.name
   }
 
-  inputReference() {
-    return digg(this, "props", "inputProps", "ref")
-  }
+  inputReference = () => digg(this, "props", "inputProps", "ref")
 
   onModelUpdated = (args) => {
     const inputRef = this.inputReference()
@@ -229,7 +229,7 @@ class ApiMakerInputsInput extends React.PureComponent {
     if (this.props.inputProps.type == "file" && value == "")
       return true
   }
-}
+})
 
 export {ApiMakerInputsInput as Input}
 export default inputWrapper(ApiMakerInputsInput)

package/src/inputs/money.jsx

@@ -6,9 +6,10 @@ import * as inflection from "inflection"
 import MoneyFormatter from "../money-formatter"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import React from "react"
+import React, {useRef} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component.js"
 
-export default class ApiMakerInputsMoney extends React.PureComponent {
+export default shapeComponent(class ApiMakerInputsMoney extends ShapeComponent {
   static defaultProps = {
     disabled: false,
     showCurrencyOptions: true
@@ -20,6 +21,7 @@ export default class ApiMakerInputsMoney extends React.PureComponent {
     className: PropTypes.string,
     currenciesCollection: PropTypes.array,
     currencyName: PropTypes.string,
+    currencyRef: PropTypes.object,
     defaultValue: PropTypes.object,
     disabled: PropTypes.bool.isRequired,
     id: PropTypes.string,
@@ -31,10 +33,17 @@ export default class ApiMakerInputsMoney extends React.PureComponent {
     placeholder: PropTypes.node,
     showCurrencyOptions: PropTypes.bool,
     small: PropTypes.bool,
-    type: PropTypes.string
+    type: PropTypes.string,
+    wholeRef: PropTypes.object
   })
 
-  inputRef = React.createRef()
+  setup() {
+    this.inputRef = useRef()
+    this.currencyRefBackup = useRef()
+    this.currencyRef = this.props.currencyRef || this.currencyRefBackup
+    this.wholeRefBackup = useRef()
+    this.wholeRef = this.props.wholeRef || this.wholeRefBackup
+  }
 
   getInputRef () {
     return this.props.inputRef || this.inputRef
@@ -58,7 +67,7 @@ export default class ApiMakerInputsMoney extends React.PureComponent {
           onChange={digg(this, "setCents")}
           onKeyUp={digg(this, "setCents")}
           placeholder={this.props.placeholder}
-          ref="whole"
+          ref={this.wholeRef}
           type="text"
         />
         {showCurrencyOptions &&
@@ -69,7 +78,7 @@ export default class ApiMakerInputsMoney extends React.PureComponent {
             id={this.inputCurrencyId()}
             name={this.inputCurrencyName()}
             onChange={digg(this, "onCurrencyChanged")}
-            ref="currency"
+            ref={this.currencyRef}
           >
             <option></option>
             {currenciesCollection.map((option) => (
@@ -149,19 +158,19 @@ export default class ApiMakerInputsMoney extends React.PureComponent {
     const inputElement = this.getInputRef().current
 
     if (!inputElement.value && inputElement.value == "") {
-      this.refs.whole.value = ""
+      this.wholeRef.current.value = ""
     } else {
       const cents = parseFloat(inputElement.value)
       const formatted = MoneyFormatter.fromMoney({amount: cents, currency: this.inputCurrencyValue()}, {decimals: 2, excludeCurrency: true}).toString()
 
-      this.refs.whole.value = formatted
+      this.wholeRef.current.value = formatted
     }
   }
 
   setCents = () => {
     const inputElement = this.getInputRef().current
 
-    let whole = MoneyFormatter.stringToFloat(this.refs.whole.value)
+    let whole = MoneyFormatter.stringToFloat(this.wholeRef.current.value)
     let cents = parseInt(whole * 100, 10)
     let oldCents = parseInt(inputElement.value, 10)
 
@@ -174,4 +183,4 @@ export default class ApiMakerInputsMoney extends React.PureComponent {
     if (this.props.onChange && oldCents != cents)
       this.props.onChange()
   }
-}
+})